javascript - 在不同的 div 中显示每个数组项

Question

我有一个包含 4 个项目的数组，我希望每个项目都显示在自己的 div 中。

<div id="chord-box"></div>
<div id="chord-box"></div>
<div id="chord-box"></div>
<div id="chord-box"></div>

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBox = document.getElementById('chord-box');

如何让每个数组项显示在它自己的 div 中？

Answer 1

另一种方法是在运行时创建元素，具有很大的优势:您不需要在脚手架中存在 div(且数量有限)，它们的数量将取决于和弦的数量。

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const container = document.getElementById('container');

for(let i=0; i < chordsArray.length; i += 1){
  let chord = document.createElement('div');
  chord.innerHTML = chordsArray[i];
  container.appendChild(chord);
}

<div id="container"></div>