使用 getElementById 将 div 的 innerHTML 设置为 = 多个数组项

Question

我正试图以 html <div id="animal"> Dog Cat Horse </div> 结束，但我不知道如何将多个数组元素组合成一个 innerHTML。我正在尝试这样的事情：

var myArray = [
  ['Dog', 'Terrier'],
  ['Cat', 'Tabby'],
  ['Horse', 'Shetland'],
];

for (i = 0; i < myArray.length; i++) {
  document.getElementById('animal').innerHTML = locations[i][0];
};

    <div id="animal"> animal names here </div>

Answer 1

当您使用 innerHTML = 时，它会替换元素中的所有 HTML。您也需要使用 += 添加到内部 HTML.

for (i = 0; i < myArray.length; i++) {
    document.getElementById('animal').innerHTML+= ' ' + myArray[i][0]; 
}

Answer 2

您目前每次迭代都会覆盖 #animal 的内容，因此仅显示最后一项。您需要连接 #animal 的 innerHTML，以便新项目附加到现有的 html。另请注意，您可以添加额外的 HTML（例如 <br/> 标记以拆分行以提高可读性。

var myArray = [
  ['Dog', 'Terrier'],
  ['Cat', 'Tabby'],
  ['Horse', 'Shetland'],
];

for (i = 0; i < myArray.length; i++) {
  document.getElementById('animal').innerHTML += myArray[i][0] + "</br>";
};

    <div id="animal"></div>

最后，用于输出动物的标记看起来像是 ordered/unordered 列表的工作。此外，正如@kb 指出的那样，最好采用更现代和惯用的方法并使用 .map and as @ gcampbell pointed out, insertAdjacentHTML 比 innerHTML

更快

var animals = [
  ['Dog', 'Terrier'],
  ['Cat', 'Tabby'],
  ['Horse', 'Shetland'],
];


var animalNames = animals.map(function(animal) {
    return "<li>" + animal[0] + "</li>";
  })
  .join("");

document.getElementById('animal').insertAdjacentHTML('beforebegin', animalNames);

<h3>Animals:</h3>
<ul id="animal"></ul>

Answer 3

您可以使用数组到字符串的转换

document.getElementById('animal').innerHTML = myArray.toString().replace(",", " ")

fiddle

Answer 4

尝试这样的事情：

var myArray = [
[ 'Dog' , 'Terrier'],
[ 'Cat' , 'Tabby' ],
[ 'Horse' , 'Shetland'],
];

var myStr;

mtStr =""

for (i = 0; i < myArray.length-1; i++) { 
    myStr += myArray[i];
 }

document.getElementById('animal').innerHTML= myStr;

Answer 5

您将在循环的每次迭代中替换 div 的内容。

理想的方法是创建一个数据字符串并将其附加到您 div 中。而不是在每次迭代中访问 dom

var myArray = [
  ['Dog', 'Terrier'],
  ['Cat', 'Tabby'],
  ['Horse', 'Shetland'],
];
var data = "";
for (i = 0; i < myArray.length; i++) {
  data += " " +  myArray[i][0];
};

document.getElementById('animal').innerHTML = data;

<div id="animal"> animal names here </div>

使用 getElementById 将 div 的 innerHTML 设置为 = 多个数组项

Set innerHTML of a div to = multiple array items using getElementById

html

javascript

arrays

innerhtml

getelementbyid