How to replicate HTML elements with Loop in javascript

Question

I'm trying to replicate html elements with a javascript for loop, the loop runs fine but does not create new elements in html.

When i print father in console, Continued with 1 element only.

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
  father.appendChild(child)
}

<div id="father">
  <div id="child" class="row mt-5">
    <div class="col-sm-8">
      <h2 class="news" id="">News</h2>
    </div>
  </div>
</div>

I want print div child 5 times in the browser

Possible duplicate of How to insert the same html element twice? — adiga
– adiga, Commented Feb 7, 2019 at 8:06
(FYI, when someone formats your code and creates a snippet, please don't sabotage it again.) — adiga
– adiga, Commented Feb 7, 2019 at 8:09

holydragon · Accepted Answer · 2019-02-07 08:06:20Z

4

Use .cloneNode

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
  father.appendChild(child.cloneNode(true))
}

<div id="father">
  <div id="child" class="row mt-5">
    <div class="col-sm-8">
      <h2 class="news" id="">News</h2>
    </div>
  </div>
</div>

answered Feb 7, 2019 at 8:06

holydragon

6,7687 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack Bashford · Accepted Answer · 2019-02-07 08:15:23Z

4

Try using cloneNode:

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
    let childCopy = child.cloneNode(true);
    father.appendChild(childCopy);
}

<div id="father">
    <div id="child" class="row mt-5">
        <div class="col-sm-8">
            <h2 class="news" id="">News</h2>
        </div>
    </div>
</div>

edited Feb 7, 2019 at 8:15

answered Feb 7, 2019 at 8:06

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

behzad besharati · Accepted Answer · 2019-02-07 08:30:52Z

1

You can also use template tag for cloning, the template tag is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.

var father = document.getElementById('father');
var temp = document.getElementsByTagName("template")[0];
  
for (let i = 0; i < 4; i++) {
   father.appendChild(temp.content.cloneNode(true))
}

  <template>
  
    <div class="row mt-5">
        <div class="col-sm-8">
            <h2 class="news" id="">News</h2>
        </div>
    </div>

  </template>
  
  <div id="father">

edited Feb 7, 2019 at 8:30

answered Feb 7, 2019 at 8:25

behzad besharati

7,0103 gold badges21 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to replicate HTML elements with Loop in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related