How do I make a element appear multiple times on my page with JavaScript?

Question

Quick question, how do I take the below box:

HTML

<div class="box">
I am a box.
</div>

CSS

.box {
border: 1px solid green;
}

JavaScript

let x =

and make it appear on my page 4 times?

Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. — mplungjan, Aug 19 '19 at 08:50
You can do in js iterations with "for" and return results in html — Iiskaandar, Aug 19 '19 at 08:50
Thank you everyone, should I delete this question or leave it here as a link to the other question in case someone else has the same question but doesn't know how to phrase it like the other question? — w3Develops, Aug 19 '19 at 08:54

score 1 · Accepted Answer · answered Aug 19 '19 at 08:54

1

You could do something like this:

let box = document.querySelector('.box');
for(let x = 0; x < 3; x++) {
    let clone = box.cloneNode(true);
    document.body.appendChild(clone)
}

answered Aug 19 '19 at 08:54

Anton Bks

Mine https://jsfiddle.net/mplungjan/go9vL76w/10/ ;) – mplungjan Aug 19 '19 at 08:58
Thank you Anton this is the perfect answer to my question. I went to the link the community said this was a duplicate of and oh my gosh I was way over my head reading through that documentation, haha I was abut to go back to Google. Thanks again you totally saved the day! – w3Develops Aug 19 '19 at 09:00
@mplungjan even better, more readable with maxBox and numBox :D – Anton Bks Aug 19 '19 at 09:03
@JonathanJackson ah my bad I cloned it, guess I need to republish it to make it visible, anyways good luck! – Anton Bks Aug 19 '19 at 09:05
Here is the dupe code. It is pretty straight forward `function cloning() { var container = document.getElementById('mydiv'); var clone = document.getElementById('div_0').cloneNode(true); clone.setAttribute('id','div_'+document.getElementById('mydiv').getElementsByTagName('div').length); container.appendChild (clone); }` - change container to body and you do not need the line with the ID since you do not have an ID – mplungjan Aug 19 '19 at 09:11
@mrplungjan this looks very interesting, I'm about to start Googling some of the terms here that look familiar but that I do not exactly know to gain a better understanding. Thank you very much. – w3Develops Aug 19 '19 at 09:33

1 Answers1