Question

我在这里有一个二维数组-https://jsfiddle.net/nx75Lcmd/1/-它显示每个组中的第二项-即b和e。当我在console.log中打印出结果时，它会循环显示结果并很好地显示结果，但是当我尝试在div中输出结果时，它只会显示最后一项。有人可以告诉我我要去哪里哪里吗？

var myStringArray = [
    ["a", "b", "c"],
  ["d", "e", "f"]
];

var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
  document.getElementById("result").innerHTML = myStringArray[i][1];
  console.log(myStringArray[i][1]);
}

Answer 1

您的问题是.innerHTML将覆盖div中的所有HTML，但不会附加到该HTML。相反，您可以创建一个全局字符串，将其追加到for循环中，然后在循环完成后将其设置为innerHTML。

请参见下面的工作示例：

var myStringArray = [
  ["a", "b", "c"],
  ["d", "e", "f"]
];

var arrayLength = myStringArray.length;
var outputHTML = "";
for (var i = 0; i < arrayLength; i++) {
  outputHTML += myStringArray[i][1];
  //console.log(myStringArray[i][1]);
}

document.getElementById("result").innerHTML = outputHTML;

<div id="result"></div>

通过创建外部字符串，您只需要执行一次.innerHTML（这是一项昂贵的操作），从而有助于最大程度地减少代码需要完成的工作量。

Answer 2

这是因为document.getElementById("result").innerHTML = myStringArray[i][1];每次都会覆盖文本，

您可以在+的前面添加一个=，这意味着它将add添加到现有文本，而不是replace。

like：document.getElementById("result").innerHTML += myStringArray[i][1];

演示

var myStringArray = [
  ["a", "b", "c"],
  ["d", "e", "f"]
];

var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
  document.getElementById("result").innerHTML += myStringArray[i][1];
  console.log(myStringArray[i][1]);
}

<div id="result">

</div>

将数组项输出为HTML

2 个答案: