[JS] childNodesを置き換える

質問

あるノードのchildNodesを別のノード配列オブジェクトに置き換えたいです。
以下のようにしてみました。

var nodes = new Array();
nodes[0] ... nodes[n] を作成。
var target = document.getElementById("id");
target.childNodes = nodes;

この処理はFF10ではスルーされてしまうようです。
１つずつappendChildしないで設定する方法はありますか？

回答No.1

Chaire · ベストアンサー

http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-childNodes

> nodeObject.childNodes
> ***NodeList型***, ***読取専用***

DOM の NodeList はただの配列ではありません。内部的に整合性をとるための「生きたリスト」なので、基本的に専用操作なしに入れ替えたりはできません。

---

// Fx
var range = document.createRange();
range.selectNodeContents(target);
range.deleteContents();
nodes.reverse().forEach(range.insertNode, range);

// also IE
var df = document.createDocumentFragment();
for (var i = 0, I = nodes.length; i < I; i++) df.appendChild(nodes[i]);
while (target.hasChildNodes()) target.removeChild(target.lastChild);
target.appendChild(df);

ノードを入れる「容器」が必要なら DocumentFragment です。いずれにせよ「専用操作」としての appendChild() は必要です。

メソッド名が長くて面倒ということなら、DOM4 の append()、remove() の実装を待って下さい。

お礼

面倒という理由ではなく、1つずつappendChildすると遅いので、
ノードの配列の参照渡しができれば速いかと思ったのですが、
そうはいかないということですね。
ありがとうございました。