添加 DOM 元素，正確的做法是什么？

Question

這個問題可能很愚蠢，也可能很基礎。

有人可以解釋添加 DOM 元素的最佳方法嗎？ 我們有這兩種添加 DOM 元素的方法。

場景：需要在現有的<div id="theEl"></div>中添加<strong>Hi</strong> > 。

1. 通過編輯其中的 HTML。

    document.getElementById("theEl").innerHTML = '<strong>Hi</strong>';

2. 通過使用document.createElement() 。

    var hi = document.createTextNode("Hi"), strong = document.createElement("strong"); strong.appendChild(hi); mydiv = document.getElementById("theEl"); document.body.insertBefore(strong, mydiv);

問題

1. 最好的方法是什么？ 一個是單行，另一個是大約五行。
2. 性能方面是什么？
3. 什么是正確的方法或最佳做法？
4. 整個代碼之間有什么區別嗎？

如果這個問題根本沒有意義，請告訴我，我很樂意關閉它甚至刪除它。 謝謝。

---

更新

對於親密的選民來說，這不會是那個問題的重復。 我剛剛注意到的一件事是，使用createElement()保留了附加到元素的事件處理程序。 即使這是一個好點，任何類型的基本 web 頁面也有 jQuery 在其中，它提供委托和這樣的東西，即使在 Z4C4AD5FCA2E7A3F74DBB1CED0038 更改之后，我也可以將事件附加到元素上。

---

伙計們，請在近距離投票時保持冷靜。 一種研究。

Answer 1

沒有“最佳”或“最佳實踐”。 它們是添加具有不同特征的內容的兩種不同方法。 您選擇哪一個取決於您的具體情況。

為了創建大量的元素，一次設置一個HTML塊通常比創建和插入大量單個元素更快。 雖然如果你真的關心這方面的性能，你需要在像jsperf這樣的工具中測試你的特定情況。

要創建具有大量精細控制的元素，從變量設置類，從變量設置內容等等，通過createElement()執行此操作通常要容易得多，您可以直接訪問每個元素的屬性而無需構造一個字符串。

如果你真的不知道這兩種方法之間的區別，並且沒有看到任何明顯的理由在特定情況下使用一種方法，那么使用更簡單且代碼更少的方法。 我就是做這個的。

在回答您的具體問題時：

1. 沒有“最好的”方式。 選擇最適合您環境的方法。
2. 您需要測試特定情況的表現。 在某些情況下，通過使用.innerHTML設置一個大字符串而不是單獨創建插入所有對象，可以更快地顯示大量HTML。
3. 沒有“正確的方法”或“最佳實踐。請參閱答案＃1。
4. 如果對這兩種方法進行編碼以創建相同的最終結果，則最終結果不需要存在差異。

Answer 2

我實際上喜歡兩者的組合：外部元素的createElement ，因此您不會刪除任何事件處理程序，並且為了方便和性能，不會刪除元素內容的innerHTML 。 例如：

var strong = document.createElement('strong');
strong.innerHTML = 'Hi';
document.getElementById('theEl').appendChild(strong);

當然，當你添加的東西的內容更復雜時，這種技術更有用; 那么你可以正常使用innerHTML （除了外部元素）但你不會刪除任何事件監聽器。

Answer 3

1.最好的方法是什么？ 一個是單行，另一個是大約五行。

這取決於背景。 您可能希望謹慎使用innerHTML作為經驗法則。

2.性能方面是什么？

DOM操作明顯優於innerHTML ，但瀏覽器似乎不斷提高innerHTML性能。

3.什么是正確的方法或最佳做法？

見＃1。

4.整個代碼之間有什么區別嗎？

是。 innerHTML示例將替換現有元素的內容，而DOM示例將新元素放在舊元素旁邊。 你可能想寫mydiv.appendChild(strong) ，但這仍然不同。 將現有元素的子節點附加到而不是替換。

Answer 4

你最擅長什么意思？ 在一個DOM操作中，一切都很好，並顯示相同的性能。 但是當你需要多個DOM插入時，情況會有所不同。

背景

每次插入DOM節點時，瀏覽器都會呈現頁面的新圖像。 因此，如果在DOM節點中插入多個子節點，瀏覽器會多次渲染它。 這個操作是你看到的最慢的。

解決方案

所以，我們需要立刻追加大多數孩子。 使用空的dom節點。 內置的是createDocumentFragment();

var holder = createDocumentFragment();
// append everything in the holder
// append holder to the main dom tree

真正的答案

如果在你描述的情況下，我寧願選擇最短的解決方案。 因為在一個dom操作中沒有性能損失