Javascript JS:innerHTML和DOM是'；不合作

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

它分解如下：

• 我使用Javascript的“appendChild”添加了一个

  div

  和一个

  按钮

• 我在按钮上添加了一个

  onclick

  处理程序，效果很好
• 我添加并分配

  div

  的

  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

但—

• 为什么会发生这种情况（“似乎它应该起作用：）”）
• 是否有修复（除了附加所有额外元素）

---

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

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

window.onload=function（）{
var D=document.createElement（“DIV”），B=document.createElement（“按钮”）；
D.id=“div1”
B.innerHTML=“这是真的吗？”；
B.onclick=function（）{alert（“猫王活着！”）；}
D.儿童（B）；
文件.正文.附件（D）；
}

---

更新：经验教训-保持一致
这是意料之中的事

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

window.onload=function（）{
var D=document.createElement（“DIV”）；
D.id=“div1”
D.innerHTML='Elvis'
文件.正文.附件（D）；
}

（这是很多有根据的猜测）我认为当您修改

D

的

innerHTML

时，

D

中的dom将被销毁，并从新值创建。因此，当构建新内容时，您将得到一个全新的

按钮

，它与

B

节点不同。由于通过js而不是通过原始元素上的属性设置

onclick

处理程序，因此新的

按钮

没有该函数引用。但是

B

仍然可以通过调用

B.click();

附加到

innerHTML

之后
要防止在

D

中对dom进行抖动，可以这样做，而不是使用

innerHTML

：

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

---

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 = D.innerHTML + "What about Tupac?";

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

D.innerHTML=“这是真的吗？”+“Tupac呢？”；

最后变成了这个,

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

D.innerHTML=“这是真的吗？Tupac呢？”；

---

现在在最后一步中，我们用一个包含HTML的新字符串完全替换了div的现有内容。就DOM而言，它不关心用户是手工输入HTML，还是通过在DOM节点上调用

innerHTML

来输入HTML。它所关心的是，它有一个HTML字符串，必须将其转换为DOM。此时创建了一个新的按钮元素，这就是为什么

onclick

停止工作的原因-它不再是同一个元素。
听起来不错，但我可能会等待一些其他意见。是的，我到处都在使用

appendChild

，但是

innerHTML

只是简单了几行而已……我甚至不能降低自己的身份去看一个奇怪的页面！这是什么玩意儿？：）只是开玩笑。谢谢你的确认。。。