title: How to append multiple elements to a div using DocumentFragment
body: <pre><code>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
      }
  };
  </code></pre>
  
  <p>This is where I create a document fragment and using it so I can add several div to same element:</p>
  
  <pre><code>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 = "&lt;img src="+e.getAttribute('src')+"&gt;";
          docfrag.appendChild(media_holder);
  //it only appends the last child of my array...
      });
      overlay.appendChild(docfrag);
  };
  </code></pre>
  
  <p>my goal is to have something like this:</p>
  
  <pre><code>&lt;div class="JGallery_BG"&gt;
    &lt;div class="JGallery_mediaContainer"&gt;&lt;img src="images/thumb_video.jpg"&gt;&lt;/div&gt;
    &lt;div class="JGallery_mediaContainer"&gt;&lt;img src="images/thumb_video.jpg"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>by the way the <code>forEach</code> function works well, 8 or 9 times. But I'm not sure whether it adds node to <code>docFrag</code> on every run or not.</p>
  
  <p>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.</p>