代码之家 › 专栏 › 技术社区 › Ben

JS:innerHTML和DOM不合作

innerhtml dom javascript

Ben · 技术社区 · 14 年前

我注意到一个有趣的行为,想知道是否有人能解释一下原因。

它像这样分解:

我加了一个 div 以及 button
我加了一个 onclick 处理按钮,工作正常
innerHTML 的 分区 添加更多内容
按钮 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 对于所有元素。

为什么会发生这种情况(“似乎应该有效:)”)
是否有修复(除了附加所有额外元素之外)?

3 回复 | 直到 14 年前

Anurag 14 年前

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 停止工作-不再是同一个元素。

lincolnk 14 年前

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

B.click();

附加到之后 内部HTML

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

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

mplungjan Gvidas 14 年前

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

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