Javascript 如何使用DocumentFragment将多个元素附加到div

在这里，我创建了一个文档片段并使用它，这样我就可以将几个div添加到同一个元素中：

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

JGallery.prototype.getReference=函数（持有者）{
var overlay=this.overlay；
var media_hld=this.media_hld；
var=这个；
var holderChildren=holder.queryselectoral（'img'）；
var docfrag=document.createDocumentFragment（）；
holderChildren.forEach（函数（e）{
e、 addEventListener（'click'，JGallery.prototype.showMe.bind（that），false）；
var media_holder=that.media_hld；
media_holder.textContent=“”；
文件附件（媒体持有人）；
//它只附加数组的最后一个子元素。。。
});
叠加。追加子对象（docfrag）；
};

我的目标是有这样的东西：

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

顺便说一句，

forEach

函数运行良好，运行了8到9次。但我不确定它是否会在每次运行时将节点添加到

docFrag

---

另一件事，我并不坚持使用文档片段，如果有更好的方法将多个元素添加到一个元素中，我希望了解并使用它。

问题之一是，在每次迭代中，您都会不断重复使用同一个媒体持有者

元素

在下面的代码中，.media\u hld始终引用同一元素

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

我发现的另一件事是，从

querySelectorAll

返回的不是数组，因此没有

forEach

方法

您可以从数组实例中借用

forEach

：

var media_holder = that.media_hld.cloneNode();

整件事可以这样理解：

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

---

如果要添加多个实例，则需要克隆

that.media\u hld

元素。现在，您每次都要覆盖单个

div

的

textContent

，并且只追加单个实例。看见

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

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