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

我想使用数组并遍历项目来执行此操作，但是:

var lightbox_elements = [];

lightbox_elements.push(lightbox_overlay, lightbox_border, lightbox_content);

知道下一步是什么吗？必须是普通的 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