Append 父元素中的子元素？

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不僅返回您想要的 3 個 div，還返回所有代表空格/換行符的節點。 你需要過濾掉它們， 這里有幾個可能的解決方案。
• 您需要在按鈕中插入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>