Javascript，设置id属性为多个元素

Question

我有一个模块，其中我有一个对象，我附加了一些元素，这取决于该对象的长度。现在我想为所有元素设置不同的ID。

下面是我的代码:

Items.map(item =>{
var ParentDiv = document.getElementById('parentDiv');
var headerH1 = document.createElement('h1')
headerH1.setAttribute('id','header1')
ParentDiv.appendChild(headerH1);
})

我已经试过了:

for(var i=0;i<=50;i++)
{
headerH1.setAttribute('id','header'+i)
ParentDiv.appendChild(headerH1);
}

我以为这可以工作，但它只是附加了50个元素，但它们的ID都是相同的，"header50"

你能告诉我我在想念什么吗?感谢。

Answer 1

每个createElement代表它自己的DOM元素，您需要独立地与每个元素交互:

const parentDiv = document.getElementById('parentDiv');
Items.forEach((item, i) => {
const newItem = document.createElement('h1');
newItem.setAttribute('id', `header${i}`);
parentDiv.appendChild(newItem);
});

另外，虽然不是必需的，但我将map切换到forEach，因为map实际上应该只用于创建一个新列表，而不是作为一个函数来迭代列表，这就是forEach的作用。

另外，它是2023，使用let/const代替var:)