Question

我注意到了一个有趣的行为，并且想知道是否有人可以说明原因。

它像这样崩溃：

我使用Javascript的'appendChild'添加了div和button。
我在按钮上添加onclick处理程序，工作正常
我添加 - 分配innerHTML的{{1}}以添加更多内容
按钮div完全停止工作

以下是一个示例脚本：

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?";。

但是 -

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

Answer 1

（这是很多有根据的猜测）我认为当你修改D的{{1}}时，innerHTML中的dom会被销毁并从新值中创建。因此，在构建新内容时，您将获得一个全新的D，它与button不是同一个节点。由于您通过js而不是原始元素上的属性设置B处理程序，因此新onclick没有该函数引用。但button仍然有效，可以通过调用

来证明

追加B.click();。

为防止dom在innerHTML内发生颠簸，您可以执行此操作而不是使用D：

innerHTML

Answer 2

innerHTML是创建DOM元素的快捷方式。当您使用innerHTML将某些内容附加到外部div时，会发生以下情况：

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

与

相同

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

与

相同

D.innerHTML = "<button>Is it true?</button>" + "What about Tupac?";

最终成为了这个，

D.innerHTML = "<button>Is it true?</button>What about Tupac?";

现在，在最后一步中，我们用一个包含HTML的新字符串完全替换了div的现有内容。就DOM而言，它并不关心用户是手动输入HTML，还是来自在DOM节点上调用innerHTML。所有它关心的是，它有一个HTML字符串，必须转换为DOM。此时会创建一个新的按钮元素，这就是onclick停止工作的原因 - 它不再是同一个元素了。

Answer 3

不是答案，只是一个测试页面 - 看起来很奇怪 - 我可以确认你的发现

<script>
window.onload=function() {
  var D = document.createElement("DIV"), B = document.createElement("BUTTON");
  D.id = "div1"
  B.innerHTML = "Is it true?";
  B.onclick = function() { alert("Elvis Lives!"); }
  D.appendChild(B);
  document.body.appendChild(D);
}
</script>
<a href="" onclick="document.getElementById('div1').innerHTML += 'What about Tupac?'; return false">Click</a><br>
<a href="" onclick="alert(document.getElementsByTagName('button')[0].onclick); return false">Test</a>

更新：经验教训 - 保持一致。

这可以按预期工作

<script>
window.onload=function() {
  var D = document.createElement("DIV");
  D.id = "div1"
  D.innerHTML = '<button onclick="alert(\'Elvis Lives!\')">Elvis</button>'
  document.body.appendChild(D);
}
</script>
<a href="" onclick="document.getElementById('div1').innerHTML += 'What about Tupac?'; return false">Click</a><br>

JS：innerHTML和DOM不合作

3 个答案: