javascript - 迭代二维数组并列出所有条目

Question

我有一个迭代二维数组的函数，每个数组都有一首歌曲和一个解释器，该函数应该运行一个循环并列出每首歌曲及其解释器。问题是它只列出了最后一首歌曲和翻译，我错过了什么所以它列出了所有这些？:

HTML:

<ul id="2d"> </ul>

JS

var twoDArray = [
  ["I did it my way", "Frank Sinatra"],
  ["Respect", "Areta Franklin"],
  ["Imagine", "John Lennon"]
];

function iterative( songs ) {
  for ( var i = 0; i < songs.length; i += 1) {
    document.getElementById("2d").innerHTML =  "<li>" + songs[i][0] + " by " + songs[i][1] + "</li>";
 }
}

iterative(twoDArray);

Answer 1

那是因为你每次循环时都设置innerHtml，所以除了最后一次之外，它每次都会覆盖自己。你想这样做

  document.getElementById("2d").innerHTML +=  "<li>" + songs[i][0] + " by " + songs[i][1] + "</li>";