Tengo este contenido JS y HTML:
const parent = document.querySelector('#parent'); const choices = parent.dataset.choices.split(",") const childTplt = document.querySelector('#children'); for (c of choices) { let child = childTplt.content.cloneNode(true); child.appendChild(document.createTextNode(c)); parent.appendChild(child); } <ul id="parent" data-choices="one,two,three"> </ul> <template id="children"> <li> </li> </template>y terminar con esto en mi página:
<ul id="parent" data-choices="one,two,three"> <li> </li> one <li> </li> two <li> </li> three</ul> ¿Por qué ese contenido de texto termina como hermano de <li> y no como un hijo real (dentro de <li></li> ?
¡Gracias por tu contribución!
La propiedad .content de un elemento de plantilla es un fragmento de documento; no es el elemento <li> . En su caso, la plantilla es simple, por lo que solo puede hacer referencia al primer elemento secundario del fragmento:
let child = childTplt.content.firstElementChild.cloneNode(true);esto funcionó para mí
function function1() { var ul = document.getElementById("list"); var li = document.createElement("li"); li.appendChild(document.createTextNode("Four")); li.setAttribute("id", "element4"); ul.appendChild(li); alert(li.id); }En el ciclo anterior, está agregando c (uno, dos, tres), luego agrega una versión clonada de lo que está dentro de #children .
for (c of choices) { let child = childTplt.content.cloneNode(true); child.appendChild(document.createTextNode(c)); //will append 'one' parent.appendChild(child); //will append <li></li> }Puede reemplazarlo con este bucle y hará lo que está buscando:
for (c of choices) { let li = document.createElement('li'); li.append(c); parent.append(li); }