如何将一个节点插入另一个节点的类中？

Question

我有以下模板：

<template id="template">
    <div class="choiceContainer">
        <div class="btn-group"></div>
    </div>
</template>

我在页面上多次使用此模板，并希望对每次使用进行编号。这是我用来检索模板并添加h1节点的javascript代码。

var template = document.getElementById("template")
var h1 = document.createElement("h1");
var num = document.createTextNode("1");
h1.appendChild(num); //creation of node to insert
var clon = template.content.cloneNode(true);
clon.insertBefore(h1, clon.childNodes[0]); //DOES NOT WORK
document.body.appendChild(clon);

但是，这不起作用，因为该节点插入到choiceContainer类的旁边，而不是我想要的内部。我怎么做？我也尝试按类名查找元素，但是我不认为node对象支持该元素。

使用当前代码，看起来像 我希望数字与其他元素位于同一行（div）。

Answer 1

您的代码基本上是正确的，除了您要在克隆的模板之前插入h1元素。

您的问题表明，您想要的是在克隆的节点内创建元素。 这是一些适合您情况的修改后的代码：

var clon = template.content.cloneNode(true);
clon.childNodes[1].prepend(h1, clon.childNodes[0]); 
document.body.appendChild(clon);

我们正在做的是，获取克隆元素的子节点，然后在其中添加h1元素（如果需要，可以添加）。

这里是JSFiddle

我希望这会有所帮助。