循环通过for循环时无法附加多个元素[重复]答案

【问题标题】：Can't append multiple elements when looping through a for loop [duplicate]循环通过for循环时无法附加多个元素[重复]
【发布时间】：2021-02-14 11:11:09
【问题描述】：

我正在循环遍历一个数组。每次迭代，我将变量的值设置为数组中的当前索引，并将其附加到我的 HTML 中的 div 中。但是，只有最后一个索引被附加到 div。

这是我的代码：

for (var i = 0; i < pronouns.length; i++) {
     var para = document.createElement("P");
     para.innerHTML = pronouns[i];
     para.style = "display: inline-block";

     alert(pronouns[i])
     document.getElementById("main").appendChild(para);
     document.getElementById("main").appendChild(input);
     document.getElementById("main").appendChild(br);
}

pronouns 等于：['I','Me','You']。有人可以帮忙吗？

【问题讨论】：

input 和 br 只是添加的其他元素，它们在 for 循环之外被声明。他们的价值观永远不会改变。
para.innerHTML = pronouns[i]; 将分配pronouns[i] 所指的任何内容，覆盖 para 的当前innerHTML。你可能想要para.innerHTML = para.innerHTML + pronouns[i]。
可以添加输入和br的定义吗？我已经测试了评论这些行并将IMeYou 输出到 div 中。
@BenM 不应该改变太多，因为para 是一个新创建的元素
您能否创建一个minimal reproducible example 以便我们查看问题并帮助您调试它？目前，您的问题似乎无法重现：jsfiddle.net/3aw510d2

标签： javascript

【解决方案1】：

正如this问题中所问，问题是您使用的是同一个孩子，然后只添加一次。

检查如何使用它：

var pronouns = ['I','Me','You']
var br = document.createElement("br");
var input = document.createElement("input");

for (var i = 0; i < pronouns.length; i++) {
     var para = document.createElement("P");
     para.innerHTML = pronouns[i];
     para.style = "display: inline-block";

     document.getElementById("main").appendChild(para);
     document.getElementById("main").appendChild(input);
     document.getElementById("main").appendChild(br);
}

&lt;div id="main"&gt; &lt;/div&gt;

它只添加了一个br 和一个input。要解决这个问题，您可以将子元素创建到循环中并将被添加。

var pronouns = ['I','Me','You']

for (var i = 0; i < pronouns.length; i++) {
     var para = document.createElement("P");
     var br = document.createElement("br");
     var input = document.createElement("input");
     para.innerHTML = pronouns[i];
     para.style = "display: inline-block";

     document.getElementById("main").appendChild(para);
     document.getElementById("main").appendChild(input);
     document.getElementById("main").appendChild(br);
}

&lt;div id="main"&gt; &lt;/div&gt;

或使用cloneNode()

var pronouns = ['I','Me','You']

var para = document.createElement("P");
var br = document.createElement("br");
var input = document.createElement("input");

for (var i = 0; i < pronouns.length; i++) {
     para.innerHTML = pronouns[i];
     para.style = "display: inline-block";

     document.getElementById("main").appendChild(para.cloneNode(true));
     document.getElementById("main").appendChild(input.cloneNode(true));
     document.getElementById("main").appendChild(br.cloneNode(true));
}

&lt;div id="main"&gt; &lt;/div&gt;

【讨论】：

【解决方案2】：

您附加的input 和br 节点应该是已创建节点的克隆。否则，每次迭代都会覆盖先前附加的节点。尝试类似：

const input = Object.assign(document.createElement("input"), {type: "text"});
const br = document.createElement("br");
const main = document.querySelector("#main");
const pronouns = ['I','Me','You'];

for (var i = 0; i < pronouns.length; i++) {
     const para = Object.assign(document.createElement("p"), {innerHTML: pronouns[i] + "&nbsp;"});
     para.style = "display: inline-block";
     main.appendChild(para);
     main.appendChild(input.cloneNode());
     //                     ^ clone the original
     main.appendChild(br.cloneNode());
}

&lt;p id="main"&gt;&lt;/p&gt;

【讨论】：

【解决方案3】：

根据您的确切需要，可以有多种解决方案，但如果您希望数组值为paragraph，然后是input field 和br element，最简单的是这样 -

var pronouns = ['I','Me','You'];

for (var i = 0; i < pronouns.length; i++) {
  var para = document.createElement("P");
  var input = document.createElement("input");
  var br = document.createElement("br");

  para.style = "display: inline-block";
  para.innerHTML = pronouns[i];

  document.getElementById("main").appendChild(para);
  document.getElementById("main").appendChild(input);
  document.getElementById("main").appendChild(br);
}

&lt;div id="main" /&gt;

【讨论】：