創建新元素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操作的意外較少，而且更容易調試。