无法克隆模板内的 LI 元素

Question

我有：

<template id="tmpl">
    <li>
        <a href="#">Link</a>
    </li>
</template>

const tmpl = document.getElementById("tmpl");

const cloned = tmpl.content.cloneNode(true);   // doesn't work

如果第一个元素是

tmpl.content

 元素，则 

li

不起作用。

问题：

我无法克隆模板子项，例如：

tmpl.content.cloneNode(true)

期望：

const cloned = tmpl.content.cloneNode(true)

退货

<li>
    <a href="#">Link</a>
</li>

为什么会出现这种情况？

Answer 1

问题是

<template>

元素的内容是

DocumentFragment

。当您克隆它时，您会得到另一个

DocumentFragment

。

要获取

li

元素，您需要访问克隆的

DocumentFragment

的子元素。

这是一个最小的例子：

const tmpl = document.getElementById("tmpl");

const clonedFragment = tmpl.content.cloneNode(true);

// Select the element to clone
const cloned = clonedFragment.firstElementChild;

// Add the cloned element to the document
document.body.appendChild(cloned);

<template id="tmpl">
    <li>
        <a href="#">Link</a>
    </li>
</template>