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

Question

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

不要な塗り直しを防ぐために、これを1回の操作で実行したいと思います。

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

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

Answer 1

これはDocumentFragment少し複雑ですが、ドキュメント内の既存のノードに新しく作成されたノードを追加する場合、一度にノードを実行するよりもパフォーマンスが向上する可能性があります。

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

Answer 2

Nodeにメソッドを追加して、内部で appendChild メソッドを呼び出すことができます。

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

これは次のように使用できます。

node.appendChildren(arrayOfNodes)

Answer 3

これはちょっと古いことは知っていますが、同様の質問がありました。親 (ノード) と子ノード (nodeList またはノードの配列) を取る単純な関数を作成することにしました。プロトタイプを拡張したり、必要以上に複雑にしたりしません...

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