Javascript 如何将循环的每个迭代存储为innerHTML

作为一名JS新手，我试图将对象的所有值存储在单独的div中。每个div和弦的名称和图像

我将所有值记录到控制台，但当我将其存储在div中时，我只会得到循环的最终结果，即最后一个值。换句话说：我似乎无法找出每次循环运行时如何在div中存储值

谢谢你的正手

这是一些东西：

var output=document.getElementById'output'； //和弦和制表符图像 变量和弦={ C:{ 和弦：C， imgSrc：http://www.guitar-chords.org.uk/chord-images/c-major-1.gif }, Cmaj9：{ 和弦：Cmaj9， imgSrc：http://www.totalguitarandbass.com/system/diagrams/495/original/CMaj9.png?1472445766 } }; //循环通过 和弦中的forvar键{ var值=和弦[键]； //日志 console.logvalue； //我愚蠢的尝试 output.innerHTML=++value.Chord++； } div{ 框大小：边框框； 显示：块； } .和弦{ 显示：块； 浮动：左； 宽度：250px； 高度：自动； 边框：1个实心番茄； } .和弦h1{ 字号：2.4em； 文本对齐：居中； 填充物：5px； } .和弦img{ 显示：块； 边缘顶部：25px； 宽度：200px； 高度：自动； 填充：25px； }

---

Using=覆盖以前对属性所做的任何更改。 应使用+=运算符将下一个元素附加到innerHTML：

var output=document.getElementById'output'； //和弦和制表符图像 变量和弦={ C:{ 和弦：C， imgSrc：http://www.guitar-chords.org.uk/chord-images/c-major-1.gif }, Cmaj9：{ 和弦：Cmaj9， imgSrc：http://www.totalguitarandbass.com/system/diagrams/495/original/CMaj9.png?1472445766 } }; //循环通过 和弦中的forvar键{ var值=和弦[键]； //日志 console.logvalue； //就在这里 output.innerHTML+++value.Chord++； } div{ 框大小：边框框； 显示：块； } .和弦{ 显示：块； 浮动：左； 宽度：250px； 高度：自动； 边框：1个实心番茄； } .和弦h1{ 字号：2.4em； 文本对齐：居中； 填充物：5px； } .和弦img{ 显示：块； 边缘顶部：25px； 宽度：200px； 高度：自动； 填充：25px； }

---

Using=覆盖以前对属性所做的任何更改。 应使用+=运算符将下一个元素附加到innerHTML：

var output=document.getElementById'output'； //和弦和制表符图像 变量和弦={ C:{ 和弦：C， imgSrc：http://www.guitar-chords.org.uk/chord-images/c-major-1.gif }, Cmaj9：{ 和弦：Cmaj9， imgSrc：http://www.totalguitarandbass.com/system/diagrams/495/original/CMaj9.png?1472445766 } }; //循环通过 和弦中的forvar键{ var值=和弦[键]； //日志 console.logvalue； //就在这里 output.innerHTML+++value.Chord++； } div{ 框大小：边框框； 显示：块； } .和弦{ 显示：块； 浮动：左； 宽度：250px； 高度：自动； 边框：1个实心番茄； } .和弦h1{ 字号：2.4em； 文本对齐：居中； 填充物：5px； } .和弦img{ 显示：块； 边缘顶部：25px； 宽度：200px； 高度：自动； 填充：25px； } 这是一把小提琴：

div的内容总是被for循环中的最后一行替换，这就是为什么内容数组中的最后一项总是只显示出来的原因

innerHTML是使用getElementById检索的输出节点的属性，因此每个循环都要在节点的innerHTML上进行写入

相反，您要做的是创建新的DOM节点并将它们附加到输出div中的最后一个子节点，或者如果您想继续使用innerHTML，请将所有内容作为字符串连接在一起，然后将output innerHTML设置为连接的字符串

类似于es6：

const chords = [
    {
        "Chord" : "C",
        "imgSrc" : "http://www.guitar-chords.org.uk/chord-images/c-major-1.gif"
    },
    {
            "Chord" : "Cmaj9",
        "imgSrc" : "http://www.totalguitarandbass.com/system/diagrams/495/original/CMaj9.png?1472445766"
    }
];

const getHTML = (chord, imgSrc) => {
    return(
    `<div class="chord">
        <h1>${chord}</h1>
      <img src="${imgSrc}" />
    </div>`
  )
};

const completeHTML = chords.reduce((prev, next) => {
        return prev + getHTML(next.Chord, next.imgSrc);
}, '');

const output = document.getElementById('output');
output.innerHTML = completeHTML; 

这是一把小提琴：

div的内容总是被for循环中的最后一行替换，这就是为什么内容数组中的最后一项总是只显示出来的原因

innerHTML是使用getElementById检索的输出节点的属性，因此每个循环都要在节点的innerHTML上进行写入

相反，您要做的是创建新的DOM节点并将它们附加到输出div中的最后一个子节点，或者如果您想继续使用innerHTML，请将所有内容作为字符串连接在一起，然后将output innerHTML设置为连接的字符串

类似于es6：

const chords = [
    {
        "Chord" : "C",
        "imgSrc" : "http://www.guitar-chords.org.uk/chord-images/c-major-1.gif"
    },
    {
            "Chord" : "Cmaj9",
        "imgSrc" : "http://www.totalguitarandbass.com/system/diagrams/495/original/CMaj9.png?1472445766"
    }
];

const getHTML = (chord, imgSrc) => {
    return(
    `<div class="chord">
        <h1>${chord}</h1>
      <img src="${imgSrc}" />
    </div>`
  )
};

const completeHTML = chords.reduce((prev, next) => {
        return prev + getHTML(next.Chord, next.imgSrc);
}, '');

const output = document.getElementById('output');
output.innerHTML = completeHTML; 

---

我不确定你想做什么，但是你用的是=而不是+=，导致内容被替换，而不是附加。哇。把事情想得太多了。谢谢我不确定你想做什么，但是你用的是=而不是+=，导致内容被替换，而不是附加。哇。把事情想得太多了。谢谢这是很有趣的东西，特雷。非常感谢。我是

---

不能够投票你的答案，所以考虑这个我的VotuUp！谢谢这是很有趣的东西，特雷。非常感谢。我不能投票给你的答案，所以考虑这个我的Votuu！谢谢