为什么 appendChild 不能处理 <li> 模板标签答案

【问题标题】：why is appendChild not working on <li> template tag为什么 appendChild 不能处理 <li> 模板标签
【发布时间】：2022-01-18 08:16:03
【问题描述】：

我有这个 JS 和 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>

并在我的页面上结束：

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

为什么文本内容最终成为<li> 的兄弟而不是实际的孩子（在<li></li> 内部？

感谢您的意见！

【问题讨论】：

对此我不确定，但您可能需要从从模板获得的内容片段中提取.firstElementChild。我想这会给你<li> 节点。编辑是的，这行得通。

标签： javascript html dom browser

【解决方案1】：

模板元素的.content 属性是一个文档片段；它不是 <li> 元素。在您的情况下，模板很简单，因此您可以只引用片段的第一个子项：

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

【讨论】：

这行得通！。我想远离 createElement（我认为这就是使用模板元素的重点）。谢谢！

【解决方案2】：

这对我有用

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

【讨论】：

【解决方案3】：

在上面的循环中，您将附加c（一、二、三），然后附加#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>
}

你可以用这个循环替换它，它会做你想要的：

for (c of choices) {
    let li = document.createElement('li');
    li.append(c);
    parent.append(li);
}

【讨论】：