CODEWITHSUNDEEP
javascripthtml
t411tocreate
t411tocreate

Reputation: 471

Insert multiple child nodes with same structure into the given parent node

Let's say I have an html container: <div id="container"></div>
And I have this code for a child, which is supposed to be inserted into the container. A child has a complex structure - it has another tags in it:

<div class="child">
    <p>P element</p>
    <img src="img.png" alt="alt">
    <p>some other elem</p>
  </div>

To insert one child element to container from JS I doo the following:

var htmlCode = {
  child: '<div class="child"> <p>P element</p><img src="img.png" alt="alt"> <p>some other elem</p></div>'
}

function insertChild(){
  var container = document.getElementById("container");
  container.innerHTML = htmlCode.child;
}

insertChild();

But how do I insert multiple child ? I need something like:

function insertMultipleChildren(childrenAmount) {
  // some magic to insert N children
}

Everything must be done with pure JS (no Jquery, etc)
Also: is there a chance to use non-minified html in pure JS ? Like in .jsx in React ?

A pen: https://codepen.io/t411tocreate/pen/dZwwby?editors=1010

Upvotes: 1

Views: 2394

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could use for loop like :

function insertMultipleChildren(childrenAmount) {
   var container = document.getElementById("container");
   var result = "";

   for (var i = 0; i < childrenAmount; i++) {
       result += htmlCode.child;
   }

   container.innerHTML = result;
}


var htmlCode = {
  child: '<div class="child"> <p>P element</p><img src="img.png" alt="alt"> <p>some other elem</p></div>'
}

function insertChild() {
  var container = document.getElementById("container");
  container.innerHTML = htmlCode.child;
}


function insertMultipleChildren(childrenAmount) {
  var container = document.getElementById("container");
  var result = "";

  for (var i = 0; i < childrenAmount; i++) {
      result += htmlCode.child;
  }

  container.innerHTML = result;
}

insertMultipleChildren(5);
<div id="container"></div>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075895

You have at least three choices:

  1. Since you're starting with a string, you could just build a string containing all the children as HTML, then do one assignment to innerHTML. (I would not recommend += with innerHTML. Every time you read from innerHTML, the browser has to go through the DOM of the element and build up a string and every time you assign to it, it has to destroy those previous elements and build new ones. Lots of easily-avoidable work, although of course it frequently doesn't matter.)

  2. Parse the string and repeatedly call appendChild on the parent with cloneNode(true) on the parsed result.

  3. Repeatedly insert using insertAdjacentHTML("beforeend", ...).

More to explore:

var htmlCode = {
  child: '<div class="child"> <p>P element</p><img src="img.png" alt="alt"> <p>some other elem</p></div>'
};

var container = document.getElementById("container");
var str = "";
// 10 children
for (var i = 0; i < 10; ++i) {
  str += htmlCode.child;
}
container.innerHTML = str;
<div id="container"></div>

Example of #2:

var htmlCode = {
  child: '<div class="child"> <p>P element</p><img src="img.png" alt="alt"> <p>some other elem</p></div>'
};

// Cheap-and-dirty parsing
var div = document.createElement("div");
div.innerHTML = htmlCode.child;

var container = document.getElementById("container");
// Empty the container (if necessary)
while (container.lastChild) {
  container.removeChild(container.lastChild);
}
// 10 children
for (var i = 0; i < 10; ++i) {
  container.appendChild(div.firstChild.cloneNode(true));
}
<div id="container"></div>

Example of #3:

var htmlCode = {
  child: '<div class="child"> <p>P element</p><img src="img.png" alt="alt"> <p>some other elem</p></div>'
};

var container = document.getElementById("container");
// Empty the container (if necessary)
while (container.lastChild) {
  container.removeChild(container.lastChild);
}
// 10 children
for (var i = 0; i < 10; ++i) {
  container.insertAdjacentHTML("beforeend", htmlCode.child);
}
<div id="container"></div>

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68443

Try this (working pen)

insertMultipleChildren(20);

function insertMultipleChildren(childrenAmount) {
  var container = document.getElementById("container");
  for( var counter = 0; counter < childrenAmount; counter++ )
  {
    var div = document.createElement( "div" ); //create div
    container.appendChild( div ); //append div to container
    div.outerHTML = htmlCode.child; //set outerHTML 
  }
}

Upvotes: 2

Related Questions