将元素数组插入到 DOM 中？

Question

我有一个元素数组：

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

我创建了一个数组：

const itemsAll = [itemCurrent, itemNext];

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

Answer 1

您可以简单地使用.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);

事实上，由于Array.from()内置了映射，所以上面的代码片段有一些冗余。所以下面改写的代码会更合理。

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