0

奇妙な状況、オンラインで解決策を見つけることができませんでした。ドキュメントフラグメントに追加しようとしている領域innerHTML内にいくつかあります...そして、改行タグを含むフォーマットを保持します。contentEditable私がこれを行うとき：

var d = document.createDocumentFragment();
var content = document.getElementById('content').getElementsByTagName('*');
console.log(content);
//this logs (img, br, span, br, img, br, span) ~ I shortened the output to just tags
for (var i = 0; i < content.length; i++) {
    (function(iCopy) {
        d.appendChild(content[iCopy]);
    })(i);
}
console.log(d);

最後のログが返されます (img、span、img、span)。ループが区切りタグを認識しないのはなぜですか? ドキュメント フラグメントに区切りタグを追加するにはどうすればよいですか?

次のようにフラグメントに何も追加せずにログに記録すると:

var content = document.querySelector('#content');
for (var i = 0; i < content.children.length; i++) {
    console.log(content.children[i].tagName);
    //d.appendChild(content.children[i]);
}

「img、br、span、br、img、br、span」と表示されます。コメントを外すとすぐにappendChild、改行が消えます。どうして？？

私の解決策：

var d = document.createDocumentFragment();
var content = document.querySelector('#content');
while (content.children.length > 0) {
    d.appendChild(content.children[0]);
}
console.log(d);
4

1 に答える 1

1

要素を に追加するとdocumentFragment、DOM から削除されます。これにより、反復しているコレクションが更新され、インデックスが再作成されます。

要素が1つおきの場合、<br>当然、再インデックスのためにスキップされたものになります。

これを修正するには、逆方向に反復して、インデックスの再作成ではなく、インデックスの再作成から遠ざかるようにします。

for (var i = content.length-1; i > -1; i--) {
    d.appendChild(content[i]);
}

参考までに、すぐに呼び出される関数は無意味なので削除しました。

これにより、すべての DOM ノードがリストにフラット化されることに注意してください。ネストされたノードがある場合、それらはネストされなくなります。

于 2015-07-03T16:25:19.407 に答える