为何在cloneNode复制HTML模板内容后仍需调用importNode？

结论很直接：在这个同文档的场景下，重复调用document.importNode(template, true)完全是多余的，没有任何必要。

具体原因拆解：

• 第一步的document.querySelector("#boxTemplate").content.cloneNode(true)已经生成了一个独立的文档片段副本，这个副本本身就属于当前页面的文档上下文，直接把它append到wrapper里完全合法且有效，不需要额外处理。
• document.importNode()的真正用武之地是跨文档场景：比如你要从iframe、或者通过document.implementation.createHTMLDocument()创建的独立文档里拿节点，想把这些节点插入当前页面时，必须用importNode将节点“导入”到当前文档的上下文里，否则浏览器会阻止插入操作。

回到你贴的MDN示例，这里的<template>本身就是当前页面的元素，clone出来的片段天然属于当前文档，所以再套一层importNode纯粹是画蛇添足，直接替换成wrapper.appendChild(template)就能达到完全一样的效果。

推测这个冗余代码要么是MDN示例为了顺带演示importNode的用法，要么是从跨文档场景的示例修改过来时没清理干净。

内容的提问来源于stack exchange，提问作者Alf Fonti