◆ $("body").html($("body").html()) でも script タグが実行される

jQuery が使われてるページをいじるときはいちいち get で生の要素を取り出すの面倒なので jQuery メソッドを使うこともあります
jQuery でも単純な機能はほぼ DOM のメソッド呼び出すくらいだろうと思ってたのに実際はかなり違ってました

html メソッドは innerHTML の getter/setter 程度だと思っていたのですが↓のコードで違いが出ます

const html = `<div><script>console.log(1)</script>aaa</div>`

// Raw DOM property
document.body.innerHTML = html

// jQuery method
$("body").html(html)


innerHTML に直接 script タグを含めた場合は JavaScript は実行されません

ですが jQuery だと実行されます
実行されない前提で子要素を単にコピーする気持ちで使うとスクリプトが何度も実行されてしまって困りました


何してるんだろうと html メソッドの中を見てみると思いの外複雑でした
単に innerHTML プロパティへの代入ではなく append と一緒で buildFragment という関数でタグごとにあれこれ処理をして DOM のフラグメント化して script タグだけを取り出して clone して実行できる形にしています


innerHTML にそのまま入れてくれればいいだけでこんなに複雑なことしてるなんて
やっぱり余計なライブラリは通さずシンプルに DOM のメソッドやプロパティを使いたくなります

特に 一度に何度も繰り返すようなループの中だとちょっとした処理でも目に見えて重いと感じますからね