JQuery html（）とinnerHTML

81

html()と同じように動作するjQueryのメソッドに完全に依存できますinnerHTMLか？innerHTMLとjQueryのhtml()方法に違いはありますか？これらのメソッドが両方とも同じであるhtml()場合、代わりにjQueryのメソッドを使用できinnerHTMLますか？

私の問題は次のとおりです。すでにデザインされたページで作業しています。ページにはテーブルが含まれており、JavaScriptではinnerHTMLプロパティを使用して動的にデータを入力しています。

アプリケーションはFirefoxで正常に動作していますが、InternetExplorerはエラーを発生させますunknown runtime exception。jQueryのhtml()メソッドを使用しましたが、IEのエラーは消えました。しかし、それがすべてのブラウザで機能するかどうかはわかりません。またinnerHTML、すべてのプロパティをjQueryのhtml()メソッドに置き換えるかどうかもわかりません。

どうもありがとう。

javascript  jquery  html  dom  innerhtml 
— ブピ
ソース
9
jQuery html（）を使用します。私は多くの場合、innerHTMLに問題がありました。また、html（）はすべてのブラウザで機能します。
— Glavić

回答:

118

あなたの質問に答えるには：

.html().innerHTMLnodeTypesなどのチェックを行った後に呼び出すだけです。また、最初try/catchに使用しようとするブロックを使用innerHTMLし、それが失敗した場合は、jQueryの.empty()+に正常にフォールバックします。append()

— jAndy
ソース
13
Internet Explorer 8（およびおそらくそれ以前）では、追加のチェックによって大きな挿入のパフォーマンスが大幅に低下する可能性があるため、IEでのパフォーマンスが重要な場合は、innerHTML直接使用することを検討してください。
— sroebuck 2012
3
簡潔なパフォーマンス比較：jsperf.com/innerhtml-vs-html-vs-empty-append
— thdoan 2015
17

特に「innerHTMLのように実行されるjqueryhtml（）メソッドに完全に依存できますか」に関して、私の答えはNOです！

これをInternetExplorer 7または8で実行すると、表示されます。

文字列の先頭が改行である<P>タグ内にネストされた<FORM>タグを含むHTMLを設定すると、jQueryは不正なHTMLを生成します。

ここにはいくつかのテストケースがあり、実行時のコメントは自明であるはずです。これは非常にあいまいですが、何が起こっているのかを理解していないと少し戸惑います。バグレポートを提出します。

<html>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   

        <script>
            $(function() {

                // the following two blocks of HTML are identical except the P tag is outside the form in the first case
                var html1 = "<p><form id='form1'><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></form></p>";
                var html2 = "<form id='form1'><p><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></p></form>";

                // <FORM> tag nested within <P>
                RunTest("<FORM> tag nested within <P> tag", html1);                 // succeeds in Internet Explorer    
                RunTest("<FORM> tag nested within <P> tag with leading newline", "\n" + html1);     // fails with added new line in Internet Explorer


                // <P> tag nested within <HTML>
                RunTest("<P> tag nested within <FORM> tag", html2);                 // succeeds in Internet Explorer
                RunTest("<P> tag nested within <FORM> tag with leading newline", "\n" + html2);     // succeeds in Internet Explorer even with \n

            });

            function RunTest(testName, html) {

                // run with jQuery
                $("#placeholder").html(html);
                var jqueryDOM = $('#placeholder').html();
                var jqueryFormSerialize = $("#placeholder form").serialize();

                // run with innerHTML
                $("#placeholder")[0].innerHTML = html;

                var innerHTMLDOM = $('#placeholder').html();
                var innerHTMLFormSerialize = $("#placeholder form").serialize();

                var expectedSerializedValue = "field1=111&field2=222";

                alert(  'TEST NAME: ' + testName + '\n\n' +
                    'The HTML :\n"' + html + '"\n\n' +
                    'looks like this in the DOM when assigned with jQuery.html() :\n"' + jqueryDOM + '"\n\n' +
                    'and looks like this in the DOM when assigned with innerHTML :\n"' + innerHTMLDOM + '"\n\n' +

                    'We expect the form to serialize with jQuery.serialize() to be "' + expectedSerializedValue + '"\n\n' +

                    'When using jQuery to initially set the DOM the serialized value is :\n"' + jqueryFormSerialize + '\n' +
                    'When using innerHTML to initially set the DOM the serialized value is :\n"' + innerHTMLFormSerialize + '\n\n' +

                    'jQuery test : ' + (jqueryFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED") + '\n' +
                    'InnerHTML test : ' + (innerHTMLFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED") 

                    );
            }

        </script>
    </head>

    <div id="placeholder">
        This is #placeholder text will 
    </div>

</html>
— Simon_Weaver
ソース
このバグレポートは、<P>タグで許可されているもの（またはそのようなもの）に関して無効なHTMLを持っていることを教えてくれたと思います。これはかなり前のことなので、何かが変わったかどうかはわかりませんが、3年経ってもまだ賛成票が上がっているので、誰か追加するものがあればコメントを追加してください
— Simon_Weaver 2013年
これはまだIE9にあります。それを試してみてください：$（ "body"）。html（ "<p> <form> <div>そこで何をしたか見てみましょう？</ div> </ form> </ p>" ）;
— Superzadeh 2014年
8

機能について疑問がある場合、jQueryはと.html()同じ意図された機能を.innerHTML実行しますが、ブラウザー間の互換性のチェックも実行します。

このため、可能な場合は.html()代わりに.innerHTML、いつでもjQueryを使用できます。

— デビッド・タン
ソース
2
innerHTMLは、ドキュメント/要素プロパティのプロパティであり、メソッドではありません。
— Satish NRamteare19年
3

最近の一般的なサポートを.innerHTML考えると、現在の唯一の効果的な違いは、指定したhtmlにコードがある場合、任意のタグでコード.html()を実行する<script>ことです。.innerHTML、HTML5では、できません。

jQueryドキュメントから：

設計上、HTML文字列を受け入れるjQueryコンストラクターまたはメソッド（jQuery（）、. append（）、. after（）など）は、コードを実行できる可能性があります。これは、スクリプトタグの挿入、またはコードを実行するHTML属性の使用によって発生する可能性があります（たとえば<img onload="">）。これらのメソッドを使用して、URLクエリパラメータ、Cookie、フォーム入力などの信頼できないソースから取得した文字列を挿入しないでください。これを行うと、クロスサイトスクリプティング（XSS）の脆弱性が発生する可能性があります。ドキュメントにコンテンツを追加する前に、ユーザー入力を削除またはエスケープします。

注：両方とも.innerHTML、.html()jsを他の方法（onerror属性など）で実行できます。

— RedRiderX
ソース
とても興味深い。では、挿入時にHTML5に<script>タグを実行させるにはどうすればよいでしょうか。
— aizquier 2018年
それは少し古いですが、私はまだ別の答えの解決策が今日うまくいくと思います。もちろん、jQueryを使用している場合は、.html（）を使用することもできます。
— RedRiderX 2018
もう一度見てみると、その答えはscript、より大きなhtmlフラグメントからタグを解析するステップを見逃しています。たぶん、新しい質問/回答が必要ですか？
— RedRiderX 2018
0

これがあなたが始めるためのいくつかのコードです。.innerHTMLの動作を変更できます。独自の完全な.innerHTMLシムを作成することもできます。（追記：.innerHTMLの再定義はFirefoxでも機能しますが、Chromeでは機能しません-彼らはそれに取り組んでいます。）

if (/(msie|trident)/i.test(navigator.userAgent)) {
 var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
 var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
 Object.defineProperty(HTMLElement.prototype, "innerHTML", {
  get: function () {return innerhtml_get.call (this)},
  set: function(new_html) {
   var childNodes = this.childNodes
   for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
    this.removeChild (childNodes[0])
   }
   innerhtml_set.call (this, new_html)
  }
 })
}

var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)

document.body.innerHTML = ""
console.log (mydiv.innerHTML)

http://jsfiddle.net/DLLbc/9/

— アガメムヌス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.