JS：innerHTML和DOM不合作 [英] JS: innerHTML and DOM aren't cooperating

问题描述

我注意到一个有趣的行为，并且想知道有没有人能够理解这个原因。

它分解如下：

• 我添加了一个 div 和按钮使用Javascript的appendChild。


• 我添加一个 onclick 处理程序的按钮，工作正常


• 我添加 - 分配 innerHTML div 添加更多内容


• 按钮 onclick / li>
  

以下是一个示例脚本：

  var D = document.createElement（DIV），B = document.createElement（BUTTON）; 
 B.innerHTML =是真的吗？ 
 document.body.appendChild（D）; 
 D.appendChild（B）; 
 
 B.onclick = function（）{alert（Elvis Lives！）; } 
  

在这一点上，它工作正常。然后，添加以下行：...

  D.innerHTML + =Tupac？ 
  

...按钮中断。所以，我现在只使用 appendChild 。

但是 -

• 为什么会发生这种情况（看起来应该可以工作:)）


• 是否有修复（除了附加所有我的额外的元素）？

解决方案

innerHTML 是创建DOM元素的快捷方式。当您使用 innerHTML 附加到外部div时，会发生这种情况：

  D.innerHTML + =Tupac呢？; 
  

与...相同，

  D.innerHTML = D.innerHTML +Tupac呢？; 
  

与...相同，

  D.innerHTML =< button>是真的吗？< / button> +Tupac呢？; 
  

最终成为这个，

  D.innerHTML =< button>是真的吗？< / button> Tupac呢？ 
  

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

I've noticed a funny behavior and was wondering if anybody could shed some light on the reason.

It breaks down like this:

• I've added a div and a button using Javascript's `appendChild'.
• I add an onclick handler to the button, works fine
• I add-assign the innerHTML of the div to add some more content
• Button onclick stops working altogether

Here's a sample script:

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!"); }

At this point, it works fine. Then, add this line:...

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

...and the button breaks. So, I'm just using appendChild for all elements now.

But -

• Why is this happening ("seems like it should work :) ")
• Is there a fix (besides appending all my extra elements)?

解决方案

innerHTML is a shortcut for creating DOM elements. When you append something to the outer div using innerHTML, this is what happens:

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

which is the same as,

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

which is the same as,

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

which finally becomes this,

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

Now in the last step, we completely replaced the existing contents of the div, with a new string which contains HTML. As far as the DOM is concerned, it doesn't care whether a user typed the HTML by hand, or it came from calling innerHTML on a DOM node. All it cares about is, is that it has a string of HTML, which must be converted to a DOM. A new button element is created at this time, which is why the onclick stops working - it's not the same element anymore.

这篇关于JS：innerHTML和DOM不合作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！