比較與JavaScript附加和插入的方法

初始加載後，動態更新網頁通常需要JavaScript的附錄，附錄，InsertadjacenthTML或InnerHTML方法。選擇正確的方法取決於幾個因素，包括添加的內容類型和瀏覽器兼容性。

了解DOM

網站本質上是由瀏覽器渲染到文檔對像模型（DOM）樹的HTML文件。該樹由代表HTML元素（節點）的嵌套對象組成。諸如“節點”，“元素”和“對象”之類的術語通常可以互換使用，而“對象”是最特定的，“對象”是最特定的。了解該層次結構對於用JavaScript操縱DOM至關重要。

附加和插入方法

大多數附錄/插入方法遵循以下模式： Element.method(content) 。要定位一個元素，請使用諸如document.querySelector() ， document.getElementById()或document.getElementsByClassName()之類的方法。請記住， getElementsByClassName()返回一個數組。

內容類型和方法兼容性

方法的選擇在很大程度上取決於內容的類型：

• 節點：使用document.createElement()或從DOM中選擇創建。 appendChild和append節點工作。
• 純文本：簡單的文本字符串。大多數方法都支持純文本。
• HTML： HTML字符串。直接插入insertAdjacentHTML和innerHTML 。

這是方法兼容性的摘要：

選擇正確的方法

• 現有的HTML：支持HTML（例如， insertAdjacentHTML ）的方法最容易。
• JavaScript中的新HTML：為複雜HTML創建節點可能很麻煩； HTML字符串更簡潔。
• 事件聽眾：使用節點（ appendChild ， append ）進行即時事件偵聽器附件。
• 僅純文本：任何支持純文本的方法。
• 不受信任的HTML：使用insertAdjacentHTML或innerHTML之前對用戶提取的HTML進行消毒。
• Internet Explorer兼容性：如果需要IE支持，請避免append 。

示例：附加到夥伴列表

讓我們使用不同的方法將新用戶“ Dale”附加到好友列表中。假設列表具有<ul id="buddies"></ul>與<li><a>...</a></li>項目。

append

 const newbuddy = document.createelement（'li'）;
const newlink = document.createelement（'a'）;
newlink.append（“ dale”）;
newbuddy.append（newlink）;
document.queryselector（'＃buddies'）。附加（newbuddy）;

appendChild

 const newbuddy = document.createelement（'li'）;
const newlink = document.createelement（'a'）;
newlink.textContent =“ dale”;
newbuddy.appendchild（newlink）;
document.queryselector（'＃buddies'）。附錄（newbuddy）;

insertAdjacentHTML

 document.queryselector（'＃buddies'）。

innerHTML （不建議添加）

 document.queryselector（'＃buddies'）。innerhtml ='

innerHTML是有問題的，因為它取代了整個內部HTML，可能會刪除事件的偵聽器。

演示和回顧

在這裡展示所有方法的全面演示將是有益的（簡短而省略了代碼）。總之：

• 避免因事件偵聽器損失而導致的innerHTML 。
• append提供了靈活性，並且對於簡單的情況有效，但缺乏IE支持。
• appendChild具有廣泛的兼容性，適用於節點操縱。
• insertAdjacentHTML提供精確的位置並有效地處理HTML字符串，但需要仔細對用戶輸入進行消毒。

鼓勵對更先進的DOM操縱進行進一步探索before ， after insertBefore和insertAdjacentElement 。

以上是比較與JavaScript附加和插入的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！