<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DocumentFragment类型</title>
</head>
<body>
<ul></ul>
</body>
<script>
let ul=document.getElementsByTagName('ul')[0],
docFrag=document.createDocumentFragment();
const brower=[
"ie",
"firefox",
"googgle"
];
console.log(brower);
brower.forEach(function (e) {
let li=document.createElement('li');
console.log(li);
li.textContent=e;
console.log(li);
docFrag.appendChild(li);
console.log(docFrag);
});
ul.appendChild(docFrag);
/*
nodeType 的值为 11；
nodeName 的值为"#document-fragment"；
nodeValue 的值为 null；
parentNode 的值为 null；
子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或EntityReference。
虽然不能把文档片段直接添加到文档中，但可以将它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。
要创建文档片段，可以使用 document.createDocumentFragment()方法，
文档片段继承了 Node 的所有方法，通常用于执行那些针对文档的 DOM 操作。如果将文档中的节
点添加到文档片段中，就会从文档树中移除该节点，也不会从浏览器中再看到该节点。添加到文档片段
中的新节点同样也不属于文档树。可以通过 appendChild()或 insertBefore()将文档片段中内容添
加到文档中。在将文档片段作为参数传递给这两个方法时，实际上只会将文档片段的所有子节点添加到
相应位置上；文档片段本身永远不会成为文档树的一部分
*/
</script>
</html>