why is appendChild not working on <li> template tag-CodePudding

I have this JS and HTML content:

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>

and end up with this on my page:

<ul id="parent" data-choices="one,two,three"> 
  <li> </li> 
one
  <li> </li> 
two
  <li> </li> 
three</ul>

Why is that text content ends up as sibling of <li> and not as an actual children (inside of <li></li> ?

thanks for your input!

CodePudding user response：

The .content property of a template element is a document fragment; it is not the <li> element. In your case, the template is simple, so you can just reference the first child of the fragment:

  let child = childTplt.content.firstElementChild.cloneNode(true);

CodePudding user response：

This worked for me

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);
}