javascript迭代數組通過insertBefore

Question

我試圖讓我的代碼更加可重用。

目前我使用：

var top_element = document.getElementById('main'); 

document.body.insertBefore(lightbox_overlay, top_element); 
document.body.insertBefore(lightbox_border, lightbox_overlay); 
document.body.insertBefore(lightbox_content, lightbox_border); 

我想用一個數組，但通過該項目要做到這一點迭代，：

任何想法，接下來的步驟是什麼？必須是純JS ..

謝謝:)

Answer 1

我可能會在你的陣列使用documentFragment和forEach。

var frag = document.createDocumentFragment(); 

[ lightbox_overlay, 
    lightbox_border, 
    lightbox_content ].forEach(function(el) { frag.appendChild(el); }); 

document.body.insertBefore(frag, top_element); 

---

可以墊片與MDN修補舊的瀏覽器。

• .forEach() patch from MDN

---

下面是一個使用.reduce()代替另一種解決方案。

[ lightbox_overlay, 
    lightbox_border, 
    lightbox_content ].reduce(function(prev, curr) { 
           return document.body.insertBefore(curr, prev); 
          }, top_element); 

由於prev總是最後返回值（或對於第一次迭代接種的值），並且由於insertBefore返回curr項插入，對於每次迭代，所述prev總是最後curr。

• .reduce() patch from MDN