Как вставить узел в класс в другом узле?

Question

У меня есть следующий шаблон:

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

Я использую этот шаблон несколько раз на странице и хотел бы, чтобы каждое использование было пронумеровано. Вот код JavaScript, который я использую для извлечения шаблона и добавления узла h1.

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, а не внутри него, как я хочу. Как я могу это сделать? Я также попытался найти элемент по имени класса, но не думаю, что он поддерживается объектом узла.

С текущим кодом это выглядит так Я хочу, чтобы число было в той же строке (div) других элементов.

Answer 1

Ваш код в основном правильный, за исключением того, что вы вставляете элемент h1 перед клонированным шаблоном.

Ваш вопрос предполагает, что вы хотите создать элемент внутри клонированного узла. Вот модифицированный код, который будет работать в вашей ситуации:

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

То, что мы делаем, это получение дочернего узла клонированного элемента, а затем добавление (или добавление, если хотите) элемента h1 в него.

Вот JSFiddle

Надеюсь, это поможет.