jQuery の html
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ $("body").html($("body").html()) でも script タグが実行される
jQuery が使われてるページをいじるときはいちいち get で生の要素を取り出すの面倒なので jQuery メソッドを使うこともあります
jQuery でも単純な機能はほぼ DOM のメソッド呼び出すくらいだろうと思ってたのに実際はかなり違ってました
html メソッドは innerHTML の getter/setter 程度だと思っていたのですが↓のコードで違いが出ます
innerHTML に直接 script タグを含めた場合は JavaScript は実行されません
ですが jQuery だと実行されます
実行されない前提で子要素を単にコピーする気持ちで使うとスクリプトが何度も実行されてしまって困りました
何してるんだろうと html メソッドの中を見てみると思いの外複雑でした
単に innerHTML プロパティへの代入ではなく append と一緒で buildFragment という関数でタグごとにあれこれ処理をして DOM のフラグメント化して script タグだけを取り出して clone して実行できる形にしています
innerHTML にそのまま入れてくれればいいだけでこんなに複雑なことしてるなんて
やっぱり余計なライブラリは通さずシンプルに DOM のメソッドやプロパティを使いたくなります
特に 一度に何度も繰り返すようなループの中だとちょっとした処理でも目に見えて重いと感じますからね
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)
// 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 のメソッドやプロパティを使いたくなります
特に 一度に何度も繰り返すようなループの中だとちょっとした処理でも目に見えて重いと感じますからね