在父元素中追加子元素？

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("*"); 会 select 容器的所有子容器（也包括嵌套容器）。
您不能嵌套迭代同一变量的两个循环 i。
childNodes不只是return你想要的3个div，还有代表spaces/newlines的所有节点。你需要过滤掉它们，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>

在父元素中追加子元素？

Append child element in parent?

javascript

for-loop

append

parent-child

createelement