Question

我正在遍历一个数组。每次迭代，我将一个变量的值设置为数组中的当前索引，并将其附加到我的 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']。有人可以帮忙吗？

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

<div id="main"> </div>

它只添加了一个 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);
}

<div id="main"> </div>

或者使用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));
}

<div id="main"> </div>

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

<p id="main"></p>

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

<div id="main" />

循环遍历 for 循环时无法附加多个元素

3 个答案: