语法
js
createDocumentFragment()
参数
无。
返回值
一个新创建的、空的 DocumentFragment 对象,已准备好插入节点。
用法说明
DocumentFragment 是 DOM Node 对象,它们从不成为主 DOM 树的一部分。常规的用法是创建文档片段,将元素追加到文档片段中,然后将文档片段追加到 DOM 树中。在 DOM 树中,文档片段会被其所有子节点所取代。
由于文档片段是在内存中的,并且不属于主 DOM 树,因此在一些旧的引擎中,使用文档片段可能会带来更好的性能。
您也可以使用 DocumentFragment 构造函数来创建一个新的片段。
js
const fragment = new DocumentFragment();
示例
此示例在 DocumentFragment 中创建了一个主要 Web 浏览器列表,然后将新的 DOM 子树添加到文档中以供显示。
HTML
html
<ul id="ul"></ul>
JavaScript
js
const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];
browsers.forEach((browser) => {
const li = document.createElement("li");
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);
结果
规范
| 规范 |
|---|
| DOM # ref-for-dom-document-createdocumentfragment① |
浏览器兼容性
加载中…