title: Insert multiple child nodes with same structure into the given parent node
body: <p>Let's say I have an html container:
    <code>&lt;div id="container"&gt;&lt;/div&gt;</code><br>
  And I have this code for a <code>child</code>, which is supposed to be inserted into the <code>container</code>. A <code>child</code> has a complex structure - it has another tags in it:</p>
  
  <pre><code>&lt;div class="child"&gt;
      &lt;p&gt;P element&lt;/p&gt;
      &lt;img src="img.png" alt="alt"&gt;
      &lt;p&gt;some other elem&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>To insert one <code>child</code> element to <code>container</code> from JS I doo the following:</p>
  
  <pre><code>var htmlCode = {
    child: '&lt;div class="child"&gt; &lt;p&gt;P element&lt;/p&gt;&lt;img src="img.png" alt="alt"&gt; &lt;p&gt;some other elem&lt;/p&gt;&lt;/div&gt;'
  }
  
  function insertChild(){
    var container = document.getElementById("container");
    container.innerHTML = htmlCode.child;
  }
  
  insertChild();
  </code></pre>
  
  <p>But how do I insert multiple <code>child</code> ? I need something like:</p>
  
  <pre><code>function insertMultipleChildren(childrenAmount) {
    // some magic to insert N children
  }
  </code></pre>
  
  <p>Everything must be done with pure JS (no Jquery, etc)<br>
  Also: is there a chance to use non-minified html in pure JS ? Like in .jsx in React ?  </p>
  
  <p>A pen: <a href="https://codepen.io/t411tocreate/pen/dZwwby?editors=1010" rel="nofollow noreferrer">https://codepen.io/t411tocreate/pen/dZwwby?editors=1010</a></p>