Clear contents of outer div and add different number of inner divs-CodePudding

I want to change the number of inner divs from 2 to 3 but the javascript code isn't letting me. I want to get all the inner divs from the entire page and then add every three to the next inner div:

var innerElems = document.getElementsByClassName("inner");
var outerElems = document.getElementsByClassName("outer");

// Remove contents of outer divs
for (let i = 0; i < outerElems.length; i  ) {
  outerElems[i].innerHTML = "";
}

let x = 0;

for (let j = 0; j < innerElems.length; j  ) {
  outerElems[j].innerHTML = innerElems[x];
  x  ;
  outerElems[j].innerHTML = innerElems[x];
  x  ;
  outerElems[j].innerHTML = innerElems[x];
  x  
}

<div  id="outer1ID">
  <div >
      <div >
          Contents A
      </div>
  </div>
  <div >
      <div >
          Contents B
      </div>
  </div>
</div>

<div  id="outer2ID">
  <div >
      <div >
          Contents C
      </div>
  </div>
  <div >
      <div >
          Contents D
      </div>
  </div>
</div>

<div  id="outer3ID">
  <div >
      <div >
          Contents E
      </div>
  </div>
  <div >
      <div >
          Contents F
      </div>
  </div>
</div>

I want the final result to look like:

<div  id="outer1ID">
      <div >
          <div >
              Contents A
          </div>
      </div>
      <div >
          <div >
              Contents B
          </div>
      </div>
      <div >
          <div >
              Contents C
          </div>
      </div>
  </div>

  <div  id="outer2ID">
      <div >
          <div >
              Contents D
          </div>
      </div>
      <div >
          <div >
              Contents E
          </div>
      </div>
      <div >
          <div >
              Contents F
          </div>
      </div>
  </div>

When running the script, the HTML just shows "object HTMLelement" when adding to the outer divs

CodePudding user response：

Considering that your inner divs will have the same content, you can use this approach to avoid unecessary changes in the DOM:

const $outer = document.getElementsByClassName('outer');
const $inner = document.querySelector('.inner');

function addInnerElement() {
    for (const $el of $outer) {
        $el.insertAdjacentElement('beforeend', $inner.cloneNode(true));
    }
}

addInnerElement();

CodePudding user response：

After removing the content of your outer element, you can create a loop that will iterate 3 times (you want 3 inner divs). In this loop, you can create a new div element with document.createElement('div').

You can now add the class inner with classList.add('inner').

After that, you can append the new inner div to the outer div with .appendChild(element);.

In the example below, I have added a little bit of CSS to differentiate the outer div(Purple) from the inner div(Cyan).

Here is an example of what you can do:

var outerElems = document.getElementsByClassName("outer");


// Remove contents of outer divs
for(let j = 0; j < outerElems.length; j  )
{
outerElems[j].innerHTML = "";
for(let i = 1; i < 4; i  )
{
  var innerElems = document.createElement('div');
  innerElems.style.background = "cyan";
  innerElems.style.margin = "5px";
  innerElems.innerText = "Inner Div "   i;
  innerElems.classList.add('inner');
  outerElems[j].appendChild(innerElems);;
}
}

.outer{
background-color: purple;
height: 100px;
margin: 5px;
padding: 5px;
}

.inner{
background-color: cyan;
height: 20px;
margin: 5px;
}

<div  id="outer1ID">
    <div >
    </div>
    <div >
    </div>
  </div>

  <div  id="outer2ID">
    <div >
    </div>
    <div >
    </div>
  </div>

  <div  id="outer3ID">
    <div >
    </div>
    <div >
    </div>
  </div>

CodePudding user response：

run code snippet to see that my solution works

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<style>
 .inner {
   background-color: red;
   margin: 0.5rem;
 }
 .outer {
   background-color: blue
 }
</style>
<body>
<div  id="outer1ID">
   outer
    <div >
    inner
    </div>
    <div >
    inner
    </div>
  </div>

  <div  id="outer2ID">
   outer
    <div >
    inner
    </div>
    <div >
    inner
    </div>
  </div>

  <div  id="outer3ID">
   outer
    <div >
    inner
    </div>
    <div >
    inner
    </div>
  </div>
<script>
var innerElems = document.getElementsByClassName("inner")
var outerElems = document.getElementsByClassName("outer")
var lastElement = outerElems[2]

for (let [i, el] of [...outerElems].entries()) { // loop over all the remaining outer elements
  i !== 2 && el.append(lastElement.children[i].cloneNode(true)) // add inner elements from last outer element
}

// remove last one
lastElement.remove()

</script>
</body>
</html>