Javascript 克隆模板内容

这是使用

元素的示例

在下面的代码中，我只是在

模板

元素中编写了一个

div

元素

  <template id="tmpl">
     <div class="message">Hello, world!</div>
  </template>

我们可以看到

template.content

（基本上是一个文档片段）是在使用它之前克隆的。 有关的解释说： 模板内容被克隆以多次重复使用

---

我的问题是为什么不克隆就不能重用它？。你能深入了解这一点吗？

原因是

tmpl.content

是一个元素，当元素已经附加到某个东西上时，你不能将它附加到另一个源上。尝试这样做：

让elem=document.createElement（“div”）；
元素附加（tmpl.content）；
文件.正文.附加（elem）；
设elem2=document.createElement（“div”）；
elem2.append（tmpl.content）；
文件.正文.附件（elem2）；

---

它不起作用，因为

tmpl.content

已经附加到其他内容上。

原因是

tmpl.content

是一个元素，当元素已经附加到某个内容上时，您不能将其附加到另一个源。尝试这样做：

让elem=document.createElement（“div”）；
元素附加（tmpl.content）；
文件.正文.附加（elem）；
设elem2=document.createElement（“div”）；
elem2.append（tmpl.content）；
文件.正文.附件（elem2）；

它不起作用，因为

tmpl.content

已经附加到其他内容中

<script>
  let elem = document.createElement('div');
  elem.append(tmpl.content.cloneNode(true));
  document.body.append(elem);
</script>