Question

我有以下HTML：

<div id="main"><div><iframe></iframe></div>
<div>Content</div>
<div>Content</div>
<div id="clickme">Click</div>
</div>

#clickme有一个click事件，在它之后插入一个div。所以基本上点击#clickme后，结构应如下所示：

<div><div><iframe></iframe></div>
<div>Content</div>
<div>Content</div>
<div id="clickme">Click</div>
<div>Inserted div</div>
</div>

插入div后，页面似乎加载了一些东西。在控制台中，看起来iframe正在重新加载（它向iframe中加载的页面显示GET请求）。这不会是一个大问题，但所有事件都从元素中删除，这是一个问题。我尝试删除iframe，问题消失了。你对这是什么原因有所了解吗？

JS：

document.querySelector("#clickme").addEventListener("click", function(){
document.querySelector("#main").innerHTML+="<div></div>";
})

Answer 1

带有innerHTML的+ =运算符会导致在连接参数之前将main内的所有节点转换为纯文本。然后它清除实际节点并应用新渲染的字符串。

我们需要在不触及现有HTML的情况下插入新的HTML：

document.querySelector("#clickme").addEventListener("click", function(event){
  event.target.insertAdjacentHTML('afterend', '<div>Inserted div</div>');
}

副作用这段代码会消耗更少的时间。

如果有iframe，则在插入元素时页面会重置

1 个答案: