今更ながら、使ったことがないので調べてみてちょっと知ったのでメモ。

wrapAllで対象要素に別要素が含まれていた場合の挙動

仮にstrong要素をまとめて別の要素で包みたい場合にwrapAllを使用するがもし、strong要素の中にp要素があった場合の挙動が分からなかったのでメモ。

wrapで包まれる要素
wrapで包まれる要素
//

strongの途中のp要素

wrapで包まれる要素
wrapで包まれる要素

上記のような場合をjqueryで処理した場合下記のような記述になる。その場合のp要素の行方はどうなるか

//strong要素をh1要素で包む
$("strong").wrapInner("

");

結果的には、「p要素はh1に包まれたstrong要素の後にはじき出される」ようになる

wrapで包まれる要素

//はじきだされたp要素

strongの途中のp要素

いままで要素を置き換えることがあまり無かったのもも調べてみて知ったのでメモ。

置き換えられるp要素

上記のようなp要素があってh1要素に書き換える場合（テキスト内容も含む）

//p要素をh1要素に置き換える（テキスト内容も含む）
$("p").replaceWith("

");

結果は下記のようにh1要素に書き換えられテキスト自体も置き換えられる