JS:innerHTML和DOM不合作

innerHTML 是创建DOM元素的快捷方式。当您使用 ,这就是发生的情况:

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 在DOM节点上。它所关心的是,它有一个HTML字符串,必须将其转换为DOM。此时会创建一个新的button元素,这就是为什么 onclick 停止工作-不再是同一个元素。

(这是很多有根据的猜测)我认为当你修改 D 的 innerHTML ,内部的dom 从新的价值中被摧毁和创造。所以当新的内容被构建时,你会得到一个全新的 button ,它与 B onclick 通过js而不是通过原始元素的属性处理程序 按钮 乙 仍然可以通过调用

B.click();

附加到之后 内部HTML

以防止dom在 丁 ,您可以这样做而不是使用 :

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

不是答案,只是一个测试页-看起来很奇怪-我可以证实你的发现

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