将元素数组插入DOM？ [复制]

Question

我有一个元素数组：

const itemCurrent = document.createElement('div');
const itemNext = document.createElement('div');

我已经创建了一个数组：

const itemsAll = [itemCurrent, itemNext];

如何将它们全部插入到我的页面正文中？

Answer 1

要将元素添加到正文中，您需要将它们附加到文档的正文中。这是通过使用 appendChild(element) 函数完成的：

// looping through your array : 
for (let i=0;i<itemsAll.length;i++) {
     // appending your elements to the body :
     document.body.appendChild(itemsAll[i]);
}

Answer 2

您可以简单地使用.append() 一次性追加多个 DOM 节点，如下所示；

var divs = Array.from({length:10}) // lets make an array of 10 divs
                .map(function(_,i){
                       var el = document.createElement('div');
                       el.textContent = `I am div # ${i}`;
                       return el;
                     });
document.body.append(...divs);

Answer 3

回忆别人说过的话：

• 在 JS 中，您使用 array.forEach 迭代一个数组，该数组接受一个参数 - 一个函数将按顺序在数组的所有元素上调用
• 将元素附加（在末尾添加）到您调用的 DOM（页面主体）document.body.appendChild，它将要添加的元素作为参数

然后你需要的代码变成

itemsAll.forEach(function (element, index, array) {
    document.body.appendChild(element);
})

或（使用 ES6 语法）

itemsAll.forEach(el => document.body.appendChild(el)) 

Answer 4

遍历数组并使用appendChild追加每个数组：

itemsAll.forEach(el => {
  document.body.appendChild(el)
})