为啥 appendChild 不能处理 <li> 模板标签

Posted 2023-02-21

【中文标题】为啥 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> 节点。 编辑 是的，这行得通。

【参考方案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);