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

【问题标题】：Set innerHTML of a div to = multiple array items using getElementById使用 getElementById 将 div 的 innerHTML 设置为 = 多个数组项
【发布时间】：2016-07-08 12:18:51
【问题描述】：

我正在尝试完成 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];
};

    &lt;div id="animal"&gt; animal names here &lt;/div&gt;

【问题讨论】：

错字：locations -> myArray。另外，使用+= 追加，因为= 将覆盖，如果不处理HTML，请使用textContent 而不是innerHTML。
你可以遍历你的数组并将所有元素分配给一个字符串，然后将它分配给innerHTML
@Seth 请注意代码编辑。您可能只是编辑了问题的核心问题。
@Siguza 明白了。我认为问题实际上是连接，而不是 var 名称。但我转回去保留原件。
@Siguza 或insertAdjacentHTML，比innerHTML 快。

标签： javascript html arrays innerhtml getelementbyid

【解决方案1】：

您正在循环中的每次迭代中替换 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;

&lt;div id="animal"&gt; animal names here &lt;/div&gt;

【讨论】：

【解决方案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>";
};

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

最后，输出你的动物的标记看起来像是一个有序/无序列表的工作。此外，正如@kb 指出的那样，最好采用更现代和惯用的方法并使用.map，正如@gcampbell 指出的那样，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>

【讨论】：

Javascript 场景是否已经远离它的编程根源，以至于没有人再掌握像 .map() 这样的基础了？该线程中的每个答案都无缘无故地依赖于循环数组。这有点令人沮丧。
我同意你的观点，个人几乎从不使用 for 循环。但是您在答案中看到这些的原因是用 他们的 代码回答 OP 的问题。也许他们支持旧版浏览器，并且不希望为 Array.prototype.map 和其他可枚举方法添加 polyfill 的开销。更不用说基础是建立在 for/while 循环上的。查看 .map 的 polyfill。还值得指出的是，for 循环是完全可以接受的，有时甚至是必要的。在这种情况下，还有其他选择，但这不是 OP 问题的根源。
更新了使用地图的第二个选项......只为你;）
甜蜜！你绝对有道理，但我觉得 SO 是正确的地方，不仅可以从 OP 中获取表面价值，还可以提出建议并展示替代方案。在这种情况下，更多的是 for-loop 答案的数量和完全没有其他建议让我印象深刻，尽管我绝对同意 OP 原始代码的格式不应该被认为是“无意义的”，因为有时它可能由于您提到的原因而变得“坏”。不是故意要生气，你的回答很棒。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

fiddle

【讨论】：

【解决方案5】：

试试这样的：

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;

【讨论】：