操作innerHTML将删除子元素的事件处理程序？

我有这个非常简单的演示：

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

看到这里： http : //jsfiddle.net/A7aPA/

正如你所看到的，这是有效的。 （点击input，然后点击其他地方，popup一个提示。）

但是，如果我将这一行添加到JavaScript代码中：

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

那么模糊处理程序停止工作（并没有错误抛出顺便说一句）。

看到这里： http : //jsfiddle.net/A7aPA/1/

这是为什么？

Answer 1

是的，当你这样做的时候：

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

你真的在做：

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

所以你完全破坏和重新创build所有的内容。

Answer 2

修改innerHTML会导致内容被重新parsing，并且DOM节点将被重新创build，从而失去了附加的处理程序。 如第一个示例中所示附加元素不会导致该行为，因此不必重新parsing，因为您正在显式修改DOM树。

另一个好办法是使用insertAdjacentHTML（） 。 例如：

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