jQueryを使用$(sel).html(html)
すると、html領域を生成するために使用できます。
jqueryがなくても、同じことができます。また、より遅いことがdom.innerHTML = html;
わかりましたが、なぜですか?$(sel).html()
dom.innerHTML
$(sel).html
との違いは何dom.innerHTML
ですか?交換
を使用しても安全ですか?dom.innerHTML
$(sel).html
HTMLをで設定すると、設定する.html()
前に他のjQuery機能を使用するときにメモリリークを防ぐための適切なハウスキーピングが提供されます.innerHTML
。
たとえば、要素で使用し、使用したオブジェクトの親.data()
を割り当てると、置き換えられる要素に関連付けられている要素がクリーンアップされます。を使用すると、これらの要素は孤立し、ページを離れるまでクリーンアップされません(短期記憶リーク)。削除されたオブジェクトのイベントハンドラーに関連付けられている一部のjQueryデータについても同じことが言えます。.innerHTML
.data()
.html()
.data()
.innerHTML
.data()
jQueryでプログラミングする最も安全な方法は、jQueryを使用した要素を削除するときに、ネイティブDOM関数の代わりに.remove()
および.html()
(または他の同様のjQuery関数)を使用することです。
.html()
より多くのことを実行しているため、遅くなる可能性があります(他のjQuery機能を使用する場合に有利なものもあります)。
.innerHTML
実際には、他のjQuery機能を使用している要素の親を直接使用した場合に発生する可能性のあるメモリリークは、通常は問題になりません。それらが意味を持つ可能性がある場所は、要素に関連付けられた大きなデータ構造がある場合(のように.data()
)、多数の要素を作成および破棄する場合、またはページを非常に長時間実行する場合(のように)です。シングルページアプリ)。したがって、安全を確保したい場合は、要素を削除または置換できるものはすべてjQueryメソッドを使用します。
単純なメモリリークの例を次に示します。
<div id="container"><span id="whatever">foo</span></div>
$("#whatever").data("somedata", "really long string");
document.getElementById("container").innerHTML = "<span>new text</span>";
これにより、.data()
コードの最初の行にある情報セットのリークが発生します。これは、jQueryがDOMから削除された#whateverオブジェクトに関連付けられたデータをクリーンアップする機会を得ることができないためですが、jQueryはユーザーがそれを削除したことを認識しませんでした。
一方、これはそのようにリークしません:
<div id="container"><span id="whatever">foo</span></div>
$("#whatever").data("somedata", "really long string");
$("#container").html("<span>new text</span>");
jQueryは内部で使用するため、すでにDOM要素があり、提供する追加機能が.innerHTML
必要ない場合は、直接安全に使用できます。.html()
.innerHTML
JqueryDocsが言っているように.html()
このメソッドは、ブラウザのinnerHTMLプロパティを使用します。一部のブラウザは、元のドキュメントのHTMLソースを正確に複製するHTMLを返さない場合があります。たとえば、Internet Explorerでは、属性値に英数字のみが含まれている場合、属性値の前後の引用符が省略されることがあります。
.html()はJqueryのより大きなライブラリの一部であり、さらに多くのことを実行できるため、速度が遅くなると思います。しかし、を使用する両方の方法の間。innerHTML()
そしてJquery.html()
大丈夫です