将元素数组插入到DOM中？

问题描述：

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

伊夫创造了他们的数组：

const itemsAll = [itemCurrent, itemNext];

我如何可以将所有的人都到我的网页的身体吗？

可以遍历数组并插入到身体。 – Manwal

[insertAdjacentElement]（https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement），[appendChild]（https://developer.mozilla.org/en-US/docs/ Web/API/Node/appendChild）循环 –

答

遍历数组，并追加每个使用appendChild：这是通过使用appendChild（元素）函数来完成

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

这也可以内联：itemsAll.forEach（el => document.body.appendChild（el））; – Evans

答

要将元素添加到正文中，您需要将它们附加到文档正文中。

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

请添加说明。答案应该解释什么，为什么我们/应该做 – Rajesh

@Rajesh我编辑了我的答案并添加了一个解释。 – RogerC

答

要记得别人怎么说：

在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))

答

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

将元素数组插入到DOM中？

相关推荐