jqueryのinnerHTMLとhtml()の違いは何ですか?

違い: 1. html() は tbody や tr などの読み取り専用タグを設定できますが、innerHTML は以前のバージョンの IE では機能せず、割り当てることができません。値が割り当てられている場合、スクリプトはレポートを実行します。エラー; 2. html()で設定したスクリプト スクリプトは実行されますが、innerHTMLで設定したスクリプトは実行されません。

推奨チュートリアル: jquery ビデオ チュートリアル

InnerHtml() と html() の違い

##1. html() は tbody や tr などの読み取り専用タグを設定できますが、innerHTML は以前のバージョンの IE

では使用できません。 HTML ドキュメントでは、.html() メソッドを使用して任意の要素のコンテンツを取得できます。セレクターが複数の要素に一致する場合、最初に一致した要素の HTML コンテンツのみが取得されます。

innerHTML は、Html タグを含む、オブジェクトの開始位置から終了位置までのコンテンツ全体です。

当初、innerHTML と jquery の HTML は実際にはまったく同じであると考えていました。問題が発生するまでは、jquery は不要でした。

例を見てみましょう:

var tbody=document.createElement('tbody');
tbody.innerHTML=&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;; //在IE下报错，目标对象错误

次に、jquery の html を使用してみてください。

$(tbody).html(&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;);

以下で jquery が正しく表示できることがわかりました。 IEでも問題ありません。

情報を確認したところ、

jQuery の html() はフォールト トレランス処理を行っており、ネイティブ Dom API の innerHTML は、テーブル tr などの一部の要素をサポートしていません。 IE では tbody や tbody 、tr などの InnerHTML は読み取り専用で書き込みができませんが、他のブラウザでは問題ありません。

Jquery は try と catch を使用して検出します。エラーが報告された場合は、catch で this.empty().append(value) が再度呼び出され、文字列が append によって追加されます。

IE の一部の要素の innerHTML は読み取り専用です:

IE6、IE7、IE8、IE9 では、col、colGroup、frameSet、html、head、style、table、tBody、tFoot innerHTML 属性、tHead、title、tr は読み取り専用なので割り当てることはできません。割り当てられると、スクリプトはエラーを報告します。 IE10では、これらのタグのinnerHTMLが書き込み可能に変更されました。

これらのタグの innerHTML 属性は IE6 ～ IE9 では読み取り専用であるため、これらのタグの innerHTML 属性に値を代入しないようにします。たとえば、テーブルの innerHTML を次のように変更できます。 table 親要素 (p であると仮定) の innerHTML 属性の割り当て。

2. html()で設定したスクリプトは実行されますが、innerHTMLで設定したスクリプトは実行されません。

jQuery はパラメータ文字列内の script タグを強制的に有効にします (作成と置換によって) が、.innerHTML の割り当ては有効になりません。

$(&#39;#app&#39;).html(&#39;<script>alert(1)</script>&#39;)  // 会弹出警告框
$(&#39;#app&#39;)[0].innerHTML = &#39;<script>alert(1)</script>&#39; // 不会弹出警告框
      // ↑使用[0]将jquery对象转为dom对象，只有dom对象才有innerHTML方法，jQuery没有。

拡張情報:

html() 関数の利点

innerHTML 属性の欠点を見れば、利点がわかるでしょう。 jQuery の html() 関数の利点は、すべてのブラウザに対応していることです HTML5 タグがサポートされていない問題はありません、href 属性と src 属性が変換される問題はありません、一部のタグがサポートされていない問題はありませんHTML 文字列を設定できません 一言で言えば、少なくとも機能に関しては、基本的にすべてが安心です。

html() 関数の欠点

jQuery の html() 関数は限りなく完璧であるように見えますが、実際にはそうではありません。その機能は、IE を含むすべてのブラウザと互換性があります。たまたまIEですが、互換性はあるもののパフォーマンスは楽観視できず、html()関数を使って大量のhtml文字列を設定すると大変なことになります。

IE での html() 関数のパフォーマンスはどれくらい低いですか?パソコンの構成は「i5クアッドコア、8Gメモリ、IE9」で、html()関数を使って2000行4列のテーブルを設定してテストしたところ、平均所要時間は27秒でした！ IE で html() が非常に遅いのは、具体的な理由は何ですか? ソース コードをざっと読んだところ、try メソッドの使用が主な原因の 1 つであると感じました。興味のある学生は詳しく学ぶことができます。

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 ！

以上がjqueryのinnerHTMLとhtml()の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。