Clear contents of outer div and add different number of inner divs
Question
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 class="outer" id="outer1ID"> <div class="inner">inner 1</div> <div class="inner">inner 1</div> </div> <div class="outer" id="outer2ID"> <div class="inner">inner 2</div> <div class="inner">inner 2</div> </div> <div class="outer" id="outer3ID"> <div class="inner">inner 3</div> <div class="inner">inner 3</div> </div>
I want the final result to look like:
<div class="outer" id="outer1ID">
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="outer" id="outer2ID">
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>
When running the script, the HTML just shows "object HTMLelement" when adding to the outer divs
3 answers
solution1
0 2022-01-24 19:39:45
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();
solution2
0 2022-01-24 19:41:16
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 class="outer" id="outer1ID"> <div class="inner"> </div> <div class="inner"> </div> </div> <div class="outer" id="outer2ID"> <div class="inner"> </div> <div class="inner"> </div> </div> <div class="outer" id="outer3ID"> <div class="inner"> </div> <div class="inner"> </div> </div>
solution3
0 2022-01-24 19:47:45
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 class="outer" id="outer1ID"> outer <div class="inner"> inner </div> <div class="inner"> inner </div> </div> <div class="outer" id="outer2ID"> outer <div class="inner"> inner </div> <div class="inner"> inner </div> </div> <div class="outer" id="outer3ID"> outer <div class="inner"> inner </div> <div class="inner"> inner </div> </div> <script> var innerElems = document.getElementsByClassName("inner") var outerElems = document.getElementsByClassName("outer") // remove last one outerElems[2],remove() // not shure why wouldn't you do this in html, but ok for (let [i. el] of [...outerElems].entries()) { // loop over all the remaining outer elements el.append(innerElems[0].cloneNode(true)) // add another inner element to each outer element for (let child in el.children) { el.children[child].textContent = 'inner ' + (i + 1) // sets inner elements text content to be like in your example } } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.