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>

要从JS中向child插入一个container元素，请执行以下操作：

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

您可以使用for循环：

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

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

   container.innerHTML = result;
}

＆＃13;

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

＆＃13;

<div id="container"></div>

＆＃13;

Answer 2

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

Answer 3

您至少有三个选择：

由于您是以字符串开头的，因此您只需构建一个包含所有子项的字符串作为HTML，然后对innerHTML进行一次分配。（我不建议将+=与innerHTML一起使用。每次从innerHTML读取时，浏览器都必须遍历元素的DOM并构建一个字符串，并且每次分配给它必须摧毁那些以前的元素并建立新的元素。许多容易避免的工作，虽然它当然经常无关紧要。）
解析字符串，并在解析后的结果上重复调用父appendChild cloneNode(true)。
使用insertAdjacentHTML("beforeend", ...)重复插入。

更多探索：

DOM on MDN
DOM specs ＃1的例子：

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>

＃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>

＃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>

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

3 个答案: