Append child element in parent?

Question

HTML elements are taken from the container. If the parent node has a child, make a button and insert child.id from child in the button. Everything works in the code, but does not want appendChild (h2);

It should look like:

<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{}
    }
    }

score 0 · Accepted Answer · answered Oct 07 '21 at 11:35

There are many mistakes in your code:

This document.getElementById("container").querySelectorAll("*"); does select all children of a container (nested ones too).
You can not nest two loops that iterate over the same variable i.
childNodes does not return only the 3 divs you want, but also all the nodes that represent the spaces/newlines. You need to filter them out, here few possible solutions.
You require h2 tags to be inserted in the button, but you insert them in parent[i]

This should work:

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>

Thanks for the answer, everything works fine but if I insert child4 and child5 in (child3 he becomes parent3) then it doesn't work. — deki0, Oct 07 '21 at 11:58
Well, you need to explain better what you need. How should buttons be nested then? — Newbie, Oct 07 '21 at 12:06
Nowbie, I would ask you if you can explain better why it has to be (children [j] .nodeName! == 'DIV') and why it doesn't work without it? — deki0, Oct 16 '21 at 06:06

Append child element in parent?

1 Answers1