質問
これを行うための良い方法が見つからないようですが、単純であるはずだと思います。divを追加したい要素があります。次に、クローンを作成してその中間 div に押し込みたい別の要素があります。私がやりたかったことは次のとおりです。
$("#somediv > ul").after("<div id='xxx'></div>").append($("#someotherdiv").clone());
これは近いように思えますが、まだそこまでではありません。これの問題は、「追加」が元の「#somediv > ul」セレクターで動作しているように見えることです。これは理にかなっていますが、私が望んでいたものではありません。「after」で追加した中間 div を最も効率的に選択し、そこに「#someotherdiv」を入れるにはどうすればよいでしょうか?
解決
逆に使用してください insertAfter()
.
$("<div id='xxx'></div>")
.append($("#someotherdiv").clone())
.insertAfter("#somediv > ul")
作業が完了した後でのみ、生成された DOM ノードをドキュメントに追加するようにしてください。
表示されているドキュメントにノードが追加されると、ブラウザは変更の監視を開始してビューを更新します。表示されているドキュメントにノードを追加する前にすべての作業を行うと、ブラウザのパフォーマンスが向上します。
他のヒント
insertAfter() を使用します。
$("<div id='xxx'></div>").insertAfter("#somediv > ul").append($("#someotherdiv").clone())
「after」で追加した中間 div を最も効率的に選択し、そこに「#someotherdiv」を入れるにはどうすればよいでしょうか?
@Vincentのソリューションは、おそらく同じ結果を得る最も速い方法です。ただし、何らかの理由で div を追加する必要がある場合は、 after()
それを選択して操作する必要があります。
.nextAll( [expr] )
Find all sibling elements after the current element.
Use an optional expression to filter the matched set.
したがって、あなたの js は次のようになります。
$("#somediv > ul")
.after("<div id='xxx'></div>")
.nextAll('#xxx')
.append($("#someotherdiv").clone());