HTMLElement 未添加到 DOM。为什么？答案

【问题标题】：HTMLElement is not added to the DOM. Why?HTMLElement 未添加到 DOM。为什么？
【发布时间】：2017-10-12 15:03:14
【问题描述】：

我有单独的模板文件 (html)。我需要多次将这个生成的 HTML 对象加载到主页面，所以我要做接下来的事情：

const path = "/templates/news.tpl.html";
const template = await Dbc.Dom.loadTemplate({ 
    id  : "news-block", 
    path: path 
});

document.body.appendChild(template);
document.body.appendChild(template);

首先，该函数从文件中获取内容并将其添加到当前 DOM。作为返回值，它返回添加的HTMLElement对象。

之后我尝试再次添加此对象，然后我使用标准方式，通过document.body.appendChild() 函数，但我只能看到当前 DOM 中的单个模板对象。

【问题讨论】：

所以 one HTMLElement 正在添加，对吗？然后一切都按预期工作。您不能两次附加同一个对象并期望它被复制。如果你想要两个元素，你需要创建第二个。如果之前不在 DOM 中，追加只会将新对象添加到 DOM 中。再次添加它只会改变它在 DOM 中的位置，如果有的话。
我应该如何创建另一个对象，是否有克隆创建模板的功能？

标签： javascript html templates dom

【解决方案1】：

Append child 只是替换您的对象，如果您尝试几次，您的对象将出现在最后一个位置。你应该使用 cloneNode

这样的：

    document.body.appendChild(template);
document.body.appendChild(template.cloneNode(true));

【讨论】：