How to append multiple elements to a div using DocumentFragment

Question

function JGallery() {
    this.elements = this._init();
    this.overlay = this.elements.overlay;
    this.media_hld = this.elements.media_hld;
}


JGallery.prototype._init = function(){
    var overlay = document.createElement('div');
    var media_hld = document.createElement('div');

    return{
        'overlay': overlay,
        'media_hld': media_hld
    }
};

This is where I create a document fragment and using it so I can add several div to same element:

JGallery.prototype.getReference = function(holder) {
    var overlay = this.overlay;
    var media_hld = this.media_hld;
    var that = this;
    var holderChildren = holder.querySelectorAll('img');
    var docfrag = document.createDocumentFragment();
    holderChildren.forEach(function (e) {
        e.addEventListener('click', JGallery.prototype.showMe.bind(that), false);
        var media_holder = that.media_hld;
        media_holder.textContent = "<img src="+e.getAttribute('src')+">";
        docfrag.appendChild(media_holder);
//it only appends the last child of my array...
    });
    overlay.appendChild(docfrag);
};

my goal is to have something like this:

<div class="JGallery_BG">
  <div class="JGallery_mediaContainer"><img src="images/thumb_video.jpg"></div>
  <div class="JGallery_mediaContainer"><img src="images/thumb_video.jpg"></div>
</div>

by the way the forEach function works well, 8 or 9 times. But I'm not sure whether it adds node to docFrag on every run or not.

Another thing, I'm not insisting to use a document fragment, if there is a better way to add multiple elements to one element, I like to know about it and use it.

You need to clone your `that.media_hld` element if you want to add multiple instances. Right now, you're overwriting the `textContent` of that single `div` every time, and only appending that single instance. See http://stackoverflow.com/a/921316/215552 — Heretic Monkey, Jan 05 '17 at 18:51

plalx · Accepted Answer · 2017-01-05T19:04:04.353

One of the problems is that you are constantly re-using the same media holder <div> element in every iterations.

In the code below that.media_hld is always referencing the same element.

var media_holder = that.media_hld;
media_holder.textContent = "<img src="+e.getAttribute('src')+">";
docfrag.appendChild(media_holder);

If you clone the node it should work and you also need to set the innerHTML property, not the textContent.

var media_holder = that.media_hld.cloneNode();

One other thing I did spot is that what's returned from querySelectorAll is not an array and thus doesn't have a forEach method.

You could borrow forEach from an array instance though:

[].forEach.call(holderChildren, forEachBodyFunction);

The entire thing could read:

JGallery.prototype.getReference = function(holder) {
    var docfrag = document.createDocumentFragment(),
        images = holder.querySelectorAll('img');

    [].forEach.call(images, function (img) {
        img.addEventListener('click', JGallery.prototype.showMe.bind(this), false);
        var media_holder = this.media_hld.cloneNode();
        media_holder.appendChild(img.cloneNode());
        docfrag.appendChild(media_holder);

    }.bind(this));

    this.overlay.appendChild(docfrag);
};

How to append multiple elements to a div using DocumentFragment

1 Answers1