JS：innerHTML 和 DOM 不合作

我注意到一个有趣的行为，想知道是否有人可以解释其中的原因。

它是这样分解的：

• 我添加了一个div and a button使用 Javascript 的 `appendChild'。
• 我添加一个onclick按钮的处理程序，工作正常
• 我添加分配innerHTML of the div添加更多内容
• Button onclick完全停止工作

这是一个示例脚本：

var D = document.createElement("DIV"), B = document.createElement("BUTTON");
B.innerHTML = "Is it true?";
document.body.appendChild(D);
D.appendChild(B);

B.onclick = function() { alert("Elvis Lives!"); }

此时，效果很好。然后，添加这一行：...

D.innerHTML += "What about Tupac?"; 

...按钮坏了。所以，我只是使用appendChild现在对于所有元素。

But -

• 为什么会发生这种情况（“看起来应该有效:)”）
• 有修复吗（除了附加我所有的额外元素之外）？

（这是很多有根据的猜测）我认为当你修改时D's innerHTML, 内的 domD被销毁并从新值中创建。所以当新的内容被构建出来时，你会得到一个全新的button，它与以下节点不是同一节点B。因为你设置了onclick通过 js 处理程序而不是通过原始元素上的属性，新的button没有该函数参考。然而B仍然有效，可以通过调用来证明

B.click();

附加到之后innerHTML.

防止 dom 内部的抖动D，你可以这样做而不是使用innerHTML:

D.appendChild(document.createTextNode("What about Tupac?"));