Question

这是一个纯粹的学术问题。使用create new element

以这种方式向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 =）。请参阅Quentin的回答，了解为什么+=更糟糕。

Answer 2

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

将现有DOM转换为HTML源代码
修改该HTML源代码
将该HTML源代码转换为新的DOM
用新DOM替换旧DOM

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

通常，DOM操作具有较少的意外，并且更容易调试。

创建新元素vs附加html

2 个答案: