web-dev-qa-db-ja.com

JQuery html（）対innerHTML

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

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

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

どうもありがとう。

javascriptjqueryhtmldominnerhtml
75
Bhupi

質問に答えるには：

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

105
jAndy

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

Internet Explorer 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>
16
Simon_Weaver

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

このため、可能な場合は常に.html()の代わりにjQueryの.innerHTML()を使用してください。

7
David Tang

innerHTMLは標準ではないため、一部のブラウザーでは機能しない場合があります。すべてのブラウザでhtml（）を問題なく使用しました。

6
Craig

「このメソッドは、ブラウザーのinnerHTMLプロパティを使用します。」 -jQuery API

http://api.jquery.com/html/

3
codersarepeople

.innerHTMLの一般的なサポート を考えると、現在唯一の効果的な違いは、.html()が存在する場合、<script>タグでコードを実行することですあなたがそれを与えるhtmlのいずれか。 .innerHTML、 HTML5の場合 ではありません。

jQueryドキュメント から：

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

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

1
RedRiderX

開始するためのコードを次に示します。 .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/

0
Agamemnus