比较与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	Internet Explorer	安全问题
append	是的	是的	不	不	低的
appendChild	是的	不	不	是的	低的
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中文网其他相关文章！