jQuery ちょっとHTML操作

jquery

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

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

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

strongの途中のp要素

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

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

wrapで包まれる要素

wrapで包まれる要素

wrapで包まれる要素

wrapで包まれる要素

strongの途中のp要素

要素を置き換える方法 replaceWithメソッド

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

置き換えられるp要素

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

置き換え後の要素

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

置き換え後の要素