模板内容是一个空的文档片段

Question

不是 Template tag content is empty 的重复项 - Angular 中的一个错误，而我的问题是关于 Vanilla Js。

---

我正在开发一个ThingsBoard 小部件。在the HTML tab，我有这个简单的模板：

<template id="myTemplate">
  <div>Test</div>
</template>

在 JS 选项卡中，我正在尝试获取此模板的内容（最终克隆它）：

const template = document.querySelector("#myTemplate");
console.log(template.content);

但是，我得到一个 empty DocumentFrgament：

这很奇怪，因为当我在 ThingsBoard 之外运行它时（例如在 StackOverflow sn-p 上），我确实获得了模板的内容：

const template = document.querySelector("#myTemplate");
console.log(template.content);

<template id="myTemplate">
  <div>Test</div>
</template>

有什么想法吗？

Answer 1

如果您的 ThingsBoard 示例使用 React 或类似的 DOM 库，它可能会以编程方式创建 DOM，这可能会导致此问题。

当<template> 使用appendChild 以编程方式构造时，content 保持为空。 例如：

const template = document.createElement('template');
template.appendChild(document.createElement('div'));
console.log(template.content); // #document-fragment (empty)

您必须使用template.content.appendChild 而不是template.appendChild，它才能正常工作。

我希望这会有所帮助！