如何为每个元素分配不同的ID

Question

我有两个列表，一个包含用于span元素的文本，我使用此forEach循环分配了该列表：

spans.forEach(function(el) {
  const span = document.createElement('span');
  span.innerHTML = el;
  list.appendChild(span);
})

如何使用另一个列表为列表中的每个跨度分配ID？这两个列表包含相同数量的元素，并且id [0]应该分配给text [0]，依此类推。

Answer 1

您可以通过使用forEach的第二个参数来实现，就像这样：

let spans = ['one', 'two', 'three'];
let list = document.getElementById("list");

spans.forEach(function(el, i) {
  const span = document.createElement("span");
  span.innerHTML = el;
  span.id = spans[i];
  list.appendChild(span);
});

for (let child of list.childNodes) {
  console.log(child);
}

<div id="list"></div>

Answer 2

假设您的秒表命名为ids

spans.forEach(function(el,index) {
  const span = document.createElement('span');
  span.innerHTML = el;
  span.id=ids[index];
  list.appendChild(span);    
})