创建新元素vs追加HTML

Question

这是一个纯粹的学术问题。是更好的做法，新的元素添加到DOM这种方式与创建新元素

<div id="div1"> 
<p id="p1">This is a paragraph.</p> 
<p id="p2">This is another paragraph.</p> 
</div> 

<script> 
var para = document.createElement("p"); 
var node = document.createTextNode("This is new."); 
para.appendChild(node); 
var element = document.getElementById("div1"); 
element.appendChild(para); 
</script> 

或通过简单地追加HTML父元素，像这样

<div id="div1"> 
<p id="p1">This is a paragraph.</p> 
<p id="p2">This is another paragraph.</p> 
</div> 

<script> 
document.getElementById("div1").innerHTML += "<p>This is new</p>"; 
</script> 

是更好的做法是做一个或者是另一种，还是完全是纯粹的选择还是别的什么。 谢谢

Answer 1

这取决于文本的来源。您不想创建更多XSS漏洞。如果您控制文本，那么将其解析为HTML（以及CSS和JavaScript）是合理的，并且更易于编码。如果您不控制文本，则使用API​​制作元素并设置属性和文本。那么它不会变成你没有预料到的恶意代码。

---

PS。我忽略了在innerHTML上使用+=运算符。我写就好像你在比较节点内容的替换（即innerHTML =）。查看昆汀的答案，为什么+=更糟。

Answer 2

innerHTML += "<p>This is new</p>";会：

1. 转换现有的DOM到HTML源代码
2. 修改HTML源代码
3. 转换是HTML源代码到一个新的DOM
4. 与更换旧DOM新的DOM

这是效率低下的，会破坏任何绑定到ele的现有事件处理程序会消除表单控件的值（因为将被序列化为HTML的value属性将保留默认值，而不是当前值），并且可能有其他我没有想到的副作用。

一般来说，DOM操作的意外较少，而且更容易调试。