Question

I’m trying to make my code a bit more reusable.

Currently I am using:

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

I would like to use an array and iterate through the items to do this, however:

var lightbox_elements = [];

lightbox_elements.push(lightbox_overlay, lightbox_border, lightbox_content);

Any ideas what the next steps are? Must be in plain JS..

Thanks 🙂

Answer 1

I’d probably use a documentFragment and forEach on your Array.

var frag = document.createDocumentFragment();

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

document.body.insertBefore(frag, top_element);

---

You can shim older browsers with the patch from MDN.

• .forEach() patch from MDN

---

Here’s another solution that uses .reduce() instead.

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

Since prev is always the last return value (or the seeded value for the first iteration), and since insertBefore returns the curr item inserted, for each iteration, the prev is always the last curr.

• .reduce() patch from MDN