Add new div to each div-CodePudding

I need help with a testdome task.

Function appendChildren should add a new child div to each existing div. New divs should be decorated by calling decorateDiv.

For example, after appendChildren is executed, the following divs:

<div id="a">
  <div id="b">
  </div>
</div>

should take the following form (assuming decorateDiv does nothing):

<div id="a">
  <div id="b">
    <div></div>
  </div>
  <div></div>
</div>

The code below should do the job, but for some reason it goes into an infinite loop. I can't see the bugs. Can some explain whats wrong here?

function appendChildren(decorateDiv) {
  var allDivs = document.getElementsByTagName("div");

  for (var i = 0; i < allDivs.length; i  ) {
    var newDiv = document.createElement("div");
    decorateDiv(newDiv);
    allDivs[i].appendChild(newDiv);
  }
}

 
document.body.innerHTML = `
<div id="a">
  <div id="b">
  </div>
</div>`;

 
console.log(document.body.innerHTML);

CodePudding user response：

you are editing an array while looping through that array, thats a big no no. what you would want to do is create a copy of the array, iterate through the original while editing the copy, then replace the original with its copy.

(imagine iterating through something that keeps getting larger and larger... the more you edit it, the larger it becomes...)

CodePudding user response：

Use querySelectorAll and irritate the Node List with forEach. Then add a div at the inside end of the element with insertAdjacentHTML and use the param beforeend.

Also, use an EventListener to wait for a DOMContentLoaded to only run that function once at start:

window.addEventListener('DOMContentLoaded', function() {
  let ele = document.querySelectorAll('div');
  ele.forEach(el =>
    el.insertAdjacentHTML('beforeend', '<div></div>')
  );
  
  console.log(document.body.innerHTML);
})

<div id="a">
  <div id="b">
  </div>
</div>

CodePudding user response：

getElementsByTagName returns a live node list, so as you add divs, allDivs reflects those changes. You could possibly cache allDivs.length by saving it to a variable divCount then use for (var i = 0; i < divCount; i ) {...}

CodePudding user response：

If new div won't have id, then you can just change the way you get allDivs as parents:

var allDivs = document.querySelectorAll("div[id]");

CodePudding user response：

You are placing allDivs inside the appendChild() function. When you call the appendChild() function, allDivs is created. However, when the function ends, it discards the variable allDivs. Another thing I should mention is that when allDivs variable is being created, it gets updated with a new value node list, because document.getElementsByTagName() returns all the elements that has the tag . The reason why the variable is updating is because each time the function is called, the loop will insert more divs. To fix this problem, place the allDivs variable outside the function so that it will stay the same when the function is called.