3

jQuery を使用すると、要素のラップを解除するのは非常に簡単ですが、純粋な JS ではそれほど簡単ではありません。最後の2時間試してみましたが、結果はありませんでした。Google と SO のすべてのトピックを読みましたが、解決策はありません。それらのほとんどは jQuery を使用しており、クロス ブラウジングを行っていないものもあります。

これまでのところ、私は持っています:

    var temp = document.createElement("div");
    temp.innerHTML = "HERE COMES A COMPLEX HTML WITH SEVERAL DIVS, SPANS...";
    document.insertNode(temp);

問題は、HTML コードが「div」で囲まれて挿入されていることです。この div を親から削除する必要があります。私はおそらく手がかりになる試みをしましたが、これまでのところ役に立ちません：

それ以外の：

document.insertNode(temp);

私が使う

document.insertNode(temp.firstChild);

問題は、firstChild だけがドキュメントに挿入されていることです。

私が必要としているものは役に立たないと言うかもしれませんが、そうではありません! 私は(ご覧のように) 非常に多くの CSS エフェクトがロードされたWeb サイトを持っています。Web サイトに少なくとも 120 個のコンポーネントを挿入するので、この外側の div をアンラップできればすばらしいでしょう。

この Web サイトのトラフィックを最適化してバランスをとっているので、すべてスクリプトにします。最小限の html があります。すべての画像と残りの div はこのメソッドを使用して挿入されるため、最後に、削除された可能性のある DOM 内の 120 個の無駄な div は必要ありません。私には理由があるので、理由を議論するためにここにいるわけではありませんが、div をアンラップする必要があります。

OBS: outerHTML = innerHTML を使用しているメソッドがありますが、呼び出されるたびにすべてのページを再描画します。ですから、それはひどい考えです。

4

1 に答える 1

2

誰かがまだ興味を持っている場合は、 を使用してすべての要素のコンテンツを取得しRange.selectNodeContents()、 を使用して DocumentFragment に抽出することができRange.extractContents()ます。その後、ParentNode.replaceChildDocumentFragment は通常のノードであるため、使用を止めるものは何もありません。

パフォーマンスについてはわかりませんが、少なくとも個々のノードが抽出および挿入されることはなく、かなり高速になるはずです。

于 2014-01-09T04:51:50.067 に答える