DocumentFragment类型
Posted gaoxuerong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DocumentFragment类型相关的知识,希望对你有一定的参考价值。
<!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>
以上是关于DocumentFragment类型的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript:将节点复制到 DocumentFragment