Is it possible to append to innerHTML without destroying descendants' event listeners?

E

14

172

In the following example code, I attach an onclick event handler to the span containing the text "foo". The handler is an anonymous function that pops up an alert().

However, if I assign to the parent node's innerHTML, this onclick event handler gets destroyed - clicking "foo" fails to pop up the alert box.

Is this fixable?

<html>
 <head>
 <script type="text/javascript">

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

    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML += "bar";
  }

 </script>
 </head>

 <body onload="start()">
   <div id="mydiv" style="border: solid red 2px">
     <span id="myspan">foo</span>
   </div>
 </body>

</html>

Eristic answered 27/2, 2009 at 17:43 Comment(2)

This question is related to the 'appending new fields to a form erases user input' problem. The selected answer fixes both of these problems very nicely. – Vanmeter 24/7, 2014 at 18:2

Event delegation can be used to tackle this problem. – Jacquiline 28/9, 2019 at 8:33

S

160

Unfortunately, assignment to innerHTML causes the destruction of all child elements, even if you're trying to append. If you want to preserve child nodes (and their event handlers), you'll need to use DOM functions:

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

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}

Edit: Bob's solution, from the comments. Post your answer, Bob! Get credit for it. :-)

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);
    }
}

Seasonseasonable answered 27/2, 2009 at 17:47 Comment(11)

Is there a substitute that can append an arbitrary blob of HTML? – Eristic 27/2, 2009 at 17:55

newcontent= document.createElement('div'); newcontent.innerHTML= arbitrary_blob; while (newcontent.firstChild) mydiv.appendChild(newcontent.firstChild); – Thiazine 27/2, 2009 at 18:13

Nice, Bob! If you post that as a well-formatted answer, I'll select it. – Eristic 27/2, 2009 at 18:17

@Thiazine — I've updated my answer with your technique, since you haven't posted it yet yourself. If you create your own answer, go ahead and roll mine back. :-) – Seasonseasonable 27/2, 2009 at 20:25

@Ben: you don't need the call to newcontent.removeChild(). Bob's original comment was correct. – Peterson 27/2, 2009 at 20:33

@crescentfresh — If you don't remove the child node from newcontent, while (newcontent.firstChild) loops forever. Try it. – Seasonseasonable 27/2, 2009 at 21:1

Hmm… I take that back. It shouldn't loop — I have no idea what was going wrong the first time I tested it. :-/ – Seasonseasonable 27/2, 2009 at 21:9

Oh, one last thing, you'll want “var myspan”, “var newcontent” etc. to avoid accidentally spilling globals. – Thiazine 27/2, 2009 at 21:24

Heh. It's becoming apparent that my tendency to bash out quick & dirty example/prototype code doesn't serve me well on SO. :-) – Seasonseasonable 27/2, 2009 at 21:58

firstChild didn't work as expected with me, but firstElementChild did. – Artamas 18/6, 2020 at 18:15

@Artamas How did it not work as expected? A construct with a loop like

const newContent = Object.assign(document.createElement("div"), { innerHTML: arbitraryBlob }); while(newContent.firstChild){ mydiv.appendChild(newcontent.firstChild); }

is expected to work. newContent.firstChild is either a Node or null. appendChild moves a Node — Nodes can’t exist at two places at once. So the loop eventually stops when newContent.firstChild === null; at this point, all child nodes of newContent have been moved to the target mydiv — without affecting any existing child nodes. – Ocko 22/3, 2022 at 23:22

D

190

Using .insertAdjacentHTML() preserves event listeners, and is supported by all major browsers. It's a simple one-line replacement for .innerHTML.

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);

The 'beforeend' argument specifies where in the element to insert the HTML content. Options are 'beforebegin', 'afterbegin', 'beforeend', and 'afterend'. Their corresponding locations are:

<!-- beforebegin -->
<div id="mydiv">
  <!-- afterbegin -->
  <p>Existing content in #mydiv</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

Dyal answered 7/12, 2016 at 16:35 Comment(2)

be careful Chrome / Edge complains about case sensitivity: i.e. afterbegin is not accepted afterBegin is! – Medlar 19/1, 2021 at 22:24

@Medlar The specification guarantees that the string match is case-insensitive. – Ocko 22/3, 2022 at 23:12

S

160

Unfortunately, assignment to innerHTML causes the destruction of all child elements, even if you're trying to append. If you want to preserve child nodes (and their event handlers), you'll need to use DOM functions:

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

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}

Edit: Bob's solution, from the comments. Post your answer, Bob! Get credit for it. :-)

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);
    }
}