组合多个元素并将元素附加到 DOM 是一个至关重要的过程,它将成为一个耗时的过程。如果处理不当,作为开发人员,我们应该知道如何有效地更新 DOM。因此,以下是将 HTML 元素附加到 DOM 的三种方法。以下方法按时间复杂度降序排列。
- 使用 jQuery 的 append 方法。
- 使用字符串而不是节点附加元素。
- 使用纯 JavaScript 来创建和附加节点。
对于本指南,我们假设我们的任务是将 10 个列表项附加到网页正文中。
方法一:这种方法使用jQuery append() 方法来放置要插入的DOM 元素。
- 例子:
Appending new elements to document body . - JavaScript
- 输出:
方法 2:使用字符串而不是节点来附加元素。声明一个空的 JavaScript字符串以在该字符串存储 HTML 元素。不断向字符串添加新元素。使用 jQuery 的append() 方法将该字符串附加到文档或一些已经存在的 DOM 节点。
- 例子:
Appending new elements to document body . - JavaScript
- 输出:
方法 3:使用纯 JavaScript 附加元素。使用document.createElement() 方法和 Argument 中元素的标签名称。在元素的属性中设置值。这里是设置列表元素的innerHTML 属性。使用 appendChild 方法将新创建的元素附加到片段中。将片段附加到 DOM 的主体或某些已经存在的 DOM 节点。
- 例子:
Appending new elements to document body . - JavaScript
- 输出: