為什麼使用 `element.innerHTML = \'...\'` 是一種不好的做法？

使用Element.innerHTML 追加的危險

您聽說過使用element.innerHTML = "..." 連接元素的低語是編碼禁忌。但它到底有什麼危害呢？

考慮以下程式碼片段：

var str = "<div>hello world</div>";
var elm = document.getElementById("targetID");

elm.innerHTML += str; // Not recommended?

問題在於 HTML 的重複解析與渲染。每當innerHTML被指派時，瀏覽器必須解析HTML，建構DOM，並將其插入文件中。這個過程非常耗時，對於複雜的 HTML 結構來說尤其費力。

因此，不鼓勵使用innerHTML = 來簡單地附加元素。相反，選擇appendChild方法：

var newElement = document.createElement('div');
newElement.innerHTML = '<div>Hello World!</div>';
elm.appendChild(newElement);

透過使用appendChild，您可以避免不必要的重新解析並保持現有DOM元素的完整性。

注意： 雖然某些瀏覽器可能會最佳化 = ​​運算符，但最好不要依賴此行為來進行效能最佳化。

以上是為什麼使用 `element.innerHTML = \'...\'` 是一種不好的做法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！