JavaScript HTML注入效率/最佳實踐

Question

我正在尋找通過JavaScript將HTML注入工作頁面的方法。

我想知道的是，與使用getElementById()類的方法在整個頁面中插入摘要相比，注入頁面重寫是否更有效或更有效。

例如：

document.getElementById("Example").innerHTML = '<h2 id="Example" name="Example">Text</H2>'
document.getElementsByClassName("Example").innerHTML = '<H1>Test</H1>'

...等等。 這比簡單地注入我自己的整個頁面HTML版本更有效/有效嗎？

編輯：根據Lix的評論，我應該澄清一下，我很可能會將大量內容注入到頁面中，但是在任何時候都不會影響十幾個元素。

Answer 1

如果您的項目可以管理它，那么創建DOM Elements並將它們附加到tree可能更好。

效率的大問題是設置.innerHTML屬性將首先刪除所有節點，然后再解析html並將其附加到DOM。

顯然，您應該避免刪除和重新添加相同的元素，因此，如果您確定"Example"元素始終保留在頁面上，則設置它們的方式似乎是一個不錯的優化。

如果要進一步優化它，可以解析要附加到節點的html，並具有一個功能，該功能可以檢查應該附加哪些，不應該附加哪些。 但是請注意，訪問DOM的成本很高。 閱讀有關ECMA-DOM橋的更多信息。

編輯：在某些情況下，最好讓瀏覽器通過innerHTML進行html解析和注入。 這取決於您要插入的HTML的數量和要刪除的HTML的數量。 參見@Nelson Menezes關於innerHTML與append的評論。

Answer 2

取決於上下文。 如果僅是對現有內容的修飾，那么您的建議就足夠了。 無論如何，我都會使用jQuery，但這只是我的偏愛。

但是，在注入實際內容時，您有兩個問題：

• 可維護性-使代碼的結構易讀，並在需要時（並且將需要）易於更改。
• 可訪問性-禁用javascript時，所有內容都將不可見。 您應該在<noscript/>標記中提供所需內容的鏈接，或確保以任何其他您喜歡的方式對所有人進行訪問。 目前，這是少數互聯網用戶，但對於專業的網站管理員來說，這很重要。

為了解決以上兩個問題，我更喜歡使用Ajax將整個頁面，部分甚至純文本加載到現有元素中。 它使內容易於閱讀，因為內容位於與腳本完全分開的另一個文件中。 並且由於是文件，因此您可以在禁用javascript時直接將其重定向到該文件。 它使任何人都可以訪問內容。

對於普通的javascript，您必須使用XMLHttpRequest對象，例如here 。 使用jQuery，它甚至更簡單。 根據您的需要，您可以使用.load ， .get或.ajax 。

Answer 3

今天的最佳實踐是使用JQuery Manipulation函數 。

大多數時候，您會使用以下三個功能之一：

1. 替換現有的HTML節點：

   $（“ div”）。html（“新內容”）;

2. 追加同級節點：

   $（“ div”）。append（“ New content”）;

3. 刪除節點：

   $（“ div”）。remove（）;