如何通過追加for循環將多個元素插入到一個元素中？

Question

當我嘗試在for循環中追加多個元素時，為什么只插入最后一個元素，我感到非常困惑。

我創建了一個JsFiddle，展示了我無法讓它發揮作用。 我希望插入100個錨標簽，但只插入最后一個元素。

為了后面的緣故，這里是相關的JavaScript，TODO標志着相關部分：

<body>
    <h1>Zonk!</h1>
        <div class="door_game" data-doors="10">
        </div>
</body>

我想將所有100個元素插入div.door_game ：

 <body> <h1>Zonk!</h1> <div class="door_game" data-doors="10"> </div> </body>

Answer 1

這是因為你所有的門都在分享同樣的$el 。

http://jsfiddle.net/U9swZ/9/

var Door = {
    number: null,
    isSelected: false,
    containsZonk: true,
    bind: function () {
        var that = this;
        this.$el.on('click tap', function () {
            that.isSelected = true
        });
    },
    init: function () {
        this.$el = $('<a>', {
            class: 'door selectable'
        });
        return this;
    }
}

Answer 2

Door $ el創建一次，這就是為什么它會被追加並再次附加（即一次又一次地移動），這樣你才能看到最后一個。 @plalx是對的。

更重要的是，因為你附加了數百個門，在循環之前使用documentFragment（ var frag = document.createDocumentFragment() ）來收集你的門（ frag.appendChild(...) ）並將此documentFragment附加到平台循環后$ el（ this.$el.appendChild(frag) ）。 對於這樣的元素量，性能增益非常重要。

並且，不要猶豫克隆元素而不是重建它。 它要快得多。 您甚至可以使用DOM API cloneNode(false)方法對原始元素進行深度復制。

如何通過追加for循環將多個元素插入到一個元素中？

問題描述

2 個解決方案

解決方案1
6 已采納 2013-04-14 14:05:28

解決方案2
2 2013-04-14 14:20:41

如何通過追加for循環將多個元素插入到一個元素中？

問題描述

2 個解決方案

解決方案1 6 已采納 2013-04-14 14:05:28

解決方案2 2 2013-04-14 14:20:41

解決方案1
6 已采納 2013-04-14 14:05:28

解決方案2
2 2013-04-14 14:20:41