HTML | DOM createDocumentFragment() 方法介绍

简介

createDocumentFragment() 方法用于创建一个文档片段，可用于在不影响当前文档的前提下，预先构建一个 DOM 的结构，并将其一次性添加到文档中。

文档片段不属于文档树的一部分，它不会像其他节点那样在文档树中占据位置，因此使用文档片段通常比其他 DOM 操作更快。

语法

document.createDocumentFragment()

返回值

返回一个空的文档片段对象。

使用方法

在该方法示例代码中，我们首先创建一个文档片段对象，并向其添加两个段落元素，最后将文档片段对象添加到文档的 body 元素中。

function createParagraphs() {
  var fragment = document.createDocumentFragment();

  var p1 = document.createElement("p");
  p1.innerHTML = "这是第一个段落";

  var p2 = document.createElement("p");
  p2.innerHTML = "这是第二个段落";

  fragment.appendChild(p1);
  fragment.appendChild(p2);

  document.body.appendChild(fragment);
}

总结

使用 createDocumentFragment() 可以高效地创建要添加到 DOM 中的节点，并减少 DOM 操作的次数，提高页面的性能。同时也避免了不必要的回流和重绘，减少了页面的闪烁和抖动。