javascript - 将多个具有相同结构的子节点插入到给定的父节点中

Question

假设我有一个 html 容器: <div id="container"></div>
我有一个 child 的代码，应该插入到 container 中. child有一个复杂的结构 - 它有另一个标签:

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

插入一个child元素到 container从 JS 我做了以下事情:

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();

但是我如何插入多个 child ？我需要这样的东西:

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

一切都必须用纯 JS 完成(没有 Jquery 等)
另外:是否有机会在纯 JS 中使用非缩小的 html？就像 React 中的 .jsx 一样？

一支笔:https://codepen.io/t411tocreate/pen/dZwwby?editors=1010

Answer 1

试试这个 ( 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 
  }
}