javascript通过insertBefore迭代数组

我正在努力使我的代码更易于重用

目前我正在使用：

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

我想使用数组并遍历项目来完成此操作，但是：

var lightbox_elements = [];

lightbox_elements.push(lightbox_overlay, lightbox_border, lightbox_content);

你知道接下来的步骤是什么吗？必须是纯JS

---

谢谢：）

我可能会在您的阵列上使用

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中的修补程序填充旧浏览器

---

下面是另一个使用

.reduce（）

的解决方案

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

由于

prev

始终是最后一个返回值（或第一次迭代的种子值），并且

insertBefore

返回插入的

curr

项，因此对于每次迭代，

prev

始终是最后一个

curr