JavaScript innerHTML 与 createElement

摘要：在本教程中，您将了解innerHTML和createElement()在 DOM 树中创建新元素时的区别。

#1) createElement 性能更高

假设您有一个具有类容器的div元素

<div class="container"></div>Code language: HTML, XML (xml)

您可以通过创建元素并将其附加到div元素来添加新元素

let div = document.querySelector('.container');

let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);Code language: JavaScript (javascript)

您也可以使用innerHTML直接操作元素的 HTML，如下所示

let div = document.querySelector('.container');
div.innerHTML += '<p>JS DOM</p>';Code language: JavaScript (javascript)

当您想要向元素添加属性时，使用innerHTML更简洁、更短。

let div = document.querySelector('.container');
div.innerHTML += '<p class="note">JS DOM</p>';Code language: JavaScript (javascript)

但是，使用innerHTML会导致 Web 浏览器重新解析和重新创建 div 元素内部的所有 DOM 节点。因此，它不如创建新元素并将其附加到 div 元素效率高。换句话说，创建新元素并将其附加到 DOM 树的性能优于innerHTML。

#2) createElement 更安全

如 innerHTML 教程中所述，您应该仅在数据来自受信任来源（如数据库）时使用它。

如果您将无法控制的内容设置为 innerHTML，则可能会注入和执行恶意代码。

#3) 使用 DocumentFragment 编写 DOM 节点

假设您有一系列元素，并且您需要在每次迭代中

let div = document.querySelector('.container');

for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   div.appendChild(p);
}Code language: JavaScript (javascript)

此代码会导致每次迭代都重新计算样式、绘制和布局。这不是很有效率。

为了克服这个问题，您通常使用DocumentFragment来编写 DOM 节点，然后将其附加到 DOM 树

let div = document.querySelector('.container');

// compose DOM nodes
let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   fragment.appendChild(p);
}

// append the fragment to the DOM tree
div.appendChild(fragment);Code language: JavaScript (javascript)

在此示例中，我们使用DocumentFragment对象编写了 DOM 节点，并在最后将片段附加到活动的 DOM 树。

文档片段不链接到活动的 DOM 树，因此它不会产生任何性能损失。

查看DocumentFragment教程以获取更多详细信息。