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

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

这是我创建文档片段并使用它的地方，以便我可以将多个 div 添加到同一元素:

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

我的目标是拥有这样的东西:

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

顺便说一句，forEach 函数运行良好，可以运行 8 或 9 次。但我不确定它是否会在每次运行时将节点添加到 docFrag 中。

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

Answer 1

问题之一是您不断重复使用相同的介质支架 <div>每次迭代中的元素。

在下面的代码中that.media_hld始终引用相同的元素。

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

如果您克隆节点，它应该可以工作，并且您还需要设置 innerHTML属性(property)，而不是 textContent .

var media_holder = that.media_hld.cloneNode();

我发现的另一件事是从 querySelectorAll 返回的内容不是数组，因此没有 forEach方法。

你可以借forEach但来自数组实例:

[].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);
};