在父元素中附加子元素？

Question

HTML 元素取自容器。如果父节点有子节点，则创建一个按钮并在按钮中插入 child.id from child。一切都在代码中工作，但不想要 appendChild (h2);

应该是这样的：

<button id = "parent2"> <h2> child1 </h2> <h2> child2 </h2> </button>

<div id="container">
    <div id="parent1"></div>
    <div id="parent2">
        <div id="child1"></div>
        <div id="child2"></div>
        <div id="child3"></div>
    </div>
</div>
<p id="demo"></p> 

var parent = document.getElementById("container").querySelectorAll("*");

for (let i = 0; i < parent.length; i++) {
    if(parent[i].hasChildNodes()){
         var btn = document.createElement("BUTTON");  
         btn.id = parent[i].id;                  
         document.getElementById("demo").appendChild(btn); 
    }
    
    let children = parent[i].childNodes;
    
    for (let i = 0; i < children.length; i++) {
        if(children[i]){
         var h2 = document.createElement("H2");  
         h2.innerHTML = children[i].id;                  
         parent[i].appendChild(h2); 
        }else{}
    }
    }

Answer 1

你的代码有很多错误：

• 这个document.getElementById("container").querySelectorAll("*"); 确实选择了一个容器的所有子容器（也包括嵌套容器）。
• 您不能嵌套两个循环遍历同一变量i。
• childNodes 不仅返回您想要的 3 个 div，还返回代表空格/换行符的所有节点。您需要将它们过滤掉，here few possible solutions。
• 您需要在按钮中插入h2 标签，但您将它们插入parent[i]

这应该可行：

var parent = document
  .querySelectorAll("#container > *");

for (let i = 0; i < parent.length; i++) {
    if(parent[i].hasChildNodes()) {
        var btn = document.createElement("BUTTON");
        btn.id = parent[i].id;
        document.getElementById("demo").appendChild(btn);

        let children = parent[i].childNodes;
        for (let j = 0; j < children.length; j++) {
            if (children[j].nodeName !== 'DIV') continue;
            var h2 = document.createElement("H2");
            h2.innerHTML = children[j].id;
            btn.appendChild(h2);
        }
    }
}

<div id="container">
  <div id="parent1"></div>
  <div id="parent2">
      <div id="child1"></div>
      <div id="child2"></div>
      <div id="child3"></div>
  </div>
</div>
<p id="demo"></p>