Question

我有一个像这样的模板：

<template id="my-template">
   <div></div>
</template>

我这样转换为文档片段：

const elementFragment = document.getElementById("my-template").content.cloneNode(true);

然后我添加带有append的元素：

document.body.append(elementFragment);

现在的问题是，我需要对附加元素的引用，但是我拥有的引用只是Dogument-Fragment，而不是HTLMDivElement。

如何获取实际的DOM元素？

Answer 1

在MDN中：使用firstElementChild获取模板的第一个（仅在此情况下）子节点，该子节点是实际的Element节点。

const elementFragment = document.getElementById("my-template").content.firstElementChild.cloneNode(true);
                                                                      ^^^^^^^^^^^^^^^^^^

如果模板包含多个元素，则需要将它们包装在<div>或其他容器元素中。

如何从文档片段中获取实际元素？

1 个答案: