JavaScriptを使用して親ノードに子ノードの配列を1回の操作で追加するにはどうすればよいですか？

Question

JavaScriptでは、1回の操作で親ノードに子ノードの配列を追加する方法はありますか？

不必要な再描画を防ぐため、これを1回の操作で実行したいと思います。

私は親を試しました.appendChild(arrayOfNodes)、しかし例外があります。

私は、いくつかのプロジェクトで再利用される小さなコンポーネントを作っています.jQueryやZeptoのようなライブラリに依存したくありません。

あなたが内部appendChildメソッドを呼び出します Nodeの方法、追加することができます

Answer 1

：

(function() { 
    Node.prototype.appendChildren(arrayOfNodes) { 
    var length = arrayOfNodes.length; 
    for (var i = 0; i < length; i++) { 
     this.appendChild(arrayOfNodes[i]); 
    } 
    }()); 

そのようにのように使用可能になります：

node.appendChildren(arrayOfNodes) 

Answer 2

あなたは中間DocumentFragmentを使用することができ、あります文書内の既存のノードに新しく作成したノードを追加する場合は、少し複雑ですが、一度にノードを作成するよりも優れたパフォーマンスを発揮します：

var frag = document.createDocumentFragment(); 
for (var i = 0; i < arrayOfNodes.length; ++i) { 
    frag.appendChild(arrayOfNodes[i]); 
} 
someElement.appendChild(frag); 

Answer 3

私はこれが一種のものだと知っていますが、同様の質問がありました。私は親（ノード）と子ノード（nodeListまたはノードの配列）を取るプロトタイプを拡張したり、必要以上に複雑にしたりする単純な関数を書くことに決めました...

function appendChildren(parent, children) { 
    for (var i=0; i<children.length;i++) { 
     child = children[i]; 
     parent.appendChild(child); 
    } 
    return parent; 
}