onlycode.org

javascript
jquery
html
css
angularjs
node.js
ajax
html5
php
json
arrays
google-chrome
dom
regex
reactjs
ecmascript-6
javascript-events

your's history:
is it possible to append...

Is it possible to append to innerHTML without destroying descendants' event listeners, just only code?

innerhtml | javascript-events | html | javascript

edit
function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}
function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    var newcontent = document.createElement('div');
    newcontent.innerHTML = "bar";

    while (newcontent.firstChild) {
        mydiv.appendChild(newcontent.firstChild);
    }
}

34
Ben Blank, 27.02.2009 19:47




edit
var html_to_insert = "<p>New paragraph</p>";

// with .innerHTML, destroys event listeners
document.getElementById('mydiv').innerHTML += html_to_insert;

// with .insertAdjacentHTML, preserves event listeners
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);
<!-- beforebegin -->
<div id="mydiv">
  <!-- afterbegin -->
  <p>Existing content in #mydiv</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

33
user183106, 07.12.2016 18:35




edit
 $("#myspan").live("click", function(){
  alert('hi');
});

31
Cargowire, 28.02.2009 15:05



edit
var html = '<div>';
html += 'Hello div!';
html += '</div>';

var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);

15
Eneroth3, 04.07.2012 11:08




edit
function start () {
  myspan = document.getElementById("myspan");
  myspan.onclick = function() { alert ("hi"); };

  mydiv = document.getElementById("mydiv");
  clickHandler = mydiv.onclick;  // add
  mydiv.innerHTML += "bar";
  mydiv.onclick = clickHandler;  // add
}

14
Yes - that Jake., 27.02.2009 19:48




edit
var anchors = document.getElementsByTagName('a'); 
var index_a = 0;
var uls = document.getElementsByTagName('UL'); 
window.onload=function()          {alert(anchors.length);};
for(var i=0 ; i<uls.length;  i++)
{
    lis = uls[i].getElementsByTagName('LI');
    for(var j=0 ;j<lis.length;j++)
    {
        var first = lis[j].innerHTML; 
        string = "<img src=\"http://g.etfv.co/" +  anchors[index_a++] + 
            "\"  width=\"32\" 
        height=\"32\" />   " + first;
        lis[j].innerHTML = string;
    }
}

11
Gorgsenegger, 27.03.2014 21:14




edit
function start(){
var innermyspan = document.getElementById("myspan").innerHTML;
document.getElementById("myspan").innerHTML=innermyspan+"bar";
}

20
lucious, 09.07.2010 17:46

Add your just only code

your name:    



If you need full text click here

Some similar links Is it possible to append to innerHTML without destroying descendants' event listeners? ↓:
InnerHTML append instead of replacing

.append VS .html VS .innerHTML performance

Append HTML to container element without innerHTML

What are passive event listeners?



This project is created for those who just need only code, wihout maaaaaaaaaaany words.