Manipulating innerHTML removes the event handler of a child element? [duplicate]

Question

I have this very simple demo:

function foo() {     alert('Works!'); }  var inp = document.createElement('input'); inp.onblur = foo; document.body.appendChild(inp); 

See here: http://jsfiddle.net/A7aPA/

As you can see, this works. (Click on the input, then click somewhere else and an alert will pop up.)

However, if I add this line to the JavaScript code:

document.body.innerHTML += '<br>';  

then the blur handler stops working (and no error is thrown btw).

See here: http://jsfiddle.net/A7aPA/1/

Why is that?

Answer 1

Yes, when you do:

document.body.innerHTML += '<br>';  

You're really doing:

document.body.innerHTML = (document.body.innerHTML + '<br>');  

So you're completely destroying and recreating all the content.

Answer 2

Modifying innerHTML causes the content to be re-parsed and DOM nodes to be recreated, losing the handlers you have attached. Appending elements as in the first example doesn't cause that behavior, so no re-parsing has to occur, since you are modify the DOM tree explicitly.

Another good way to handle this is to use insertAdjacentHTML(). For example:

document.body.insertAdjacentHTML('beforeend', '<br>')