HTML DOM createDocumentFragment() 方法
htmlweb developmentfront end technology更新于 2024/6/1 19:56:17
HTML DOM createDocumentFragment() 方法用于创建文档片段。文档片段驻留在内存中，不会影响 DOM 结构。当我们将文档片段附加到 DOM 时，它基本上会被其子项替换，也就是说，文档中不会附加任何文档片段，只有其子项会被附加。
语法
以下是 createDocumentFragment() 方法的语法 −
document.createDocumentFragment()
它返回一个 DocumentFragment 对象，表示 documentFragment 节点。
示例
让我们来看一个 HTML DOM createDocumentFragment() 方法的示例 −
<!DOCTYPE html>
<html>
<body>
<h1>createDocumentFragment() example</h1>
<p>Click the below button to change list items using the createDocumentFragment method.</p>
<button type="button" onclick="changeList()">CHANGE</button>
<ul>
<li>Mango</li>
<li>Peach</li>
<li>Guava<li>
<li>Strawberry</liv
<li>Papaya</li>
</ul>
<script>
function changeList() {
var x= document.createDocumentFragment();
x.appendChild(document.getElementsByTagName("LI")[0]);
x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
document.getElementsByTagName("UL")[0].appendChild(x);
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"更改"按钮时 −
在上面的例子中 −
我们创建了一个包含五个列表项的无序列表 −
<ul> <li>Mango</li> <li>Peach</li> <li>Guava<li> <li>Strawberry</li> <li>Papaya</li> </ul>
然后，我们创建了"更改"按钮，当用户点击该按钮时，它将执行 changeList() 方法 −
<button type="button" onclick="changeList()">CHANGE</button>
changeList() 函数使用文档对象的 createDocumentFragment() 方法创建一个文档片段，并将其赋值给变量 x。使用 appnedChild() 方法，我们将列表元素设置为文档片段的子元素。我们将文档片段中的第一个列表元素值设置为"Watermelon"。然后，我们将该文档片段作为文档片段的最后一个子元素附加到
function changeList() {
var x= document.createDocumentFragment();
x.appendChild(document.getElementsByTagName("LI")[0]);
x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
document.getElementsByTagName("UL")[0].appendChild(x);
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
