blocks|key|1871445|text|“此方法使用浏览器的innerHTML属性。”-+jQuery+API|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1871446|http://api.jquery.com/html/|offset|length|1871447|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|R|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>"This method uses the browser's innerHTML property." - jQuery API</p>

<p><a href="http://api.jquery.com/html/" rel="nofollow noreferrer">http://api.jquery.com/html/</a></p>


blocks|key|1871449|text|回答你的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1871450|在对nodeTypes和其他东西做了一些检查之后，.html()只会调用.innerHTML。它还使用了一个try/catch块，它首先尝试使用innerHTML，如果失败了，它将优雅地退回到jQuery的.empty()+%2B+append()|offset|length|style|CODE|1871451|entityMap^0|0|P|7|10|A|1I|9|20|9|2V|8|36|8|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]|$D|P|E|Q|F|G]|$D|R|E|S|F|G]|$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|I|$]]

<p>To answer your question: </p>

<p><code>.html()</code> will just call <code>.innerHTML</code> after doing some checks for nodeTypes and stuff. It also uses a <code>try/catch</code> block where it tries to use <code>innerHTML</code> first and if that fails, it'll fallback gracefully to jQuery's <code>.empty()</code> + <code>append()</code></p>


blocks|key|2085428|text|如果您想知道功能，那么jQuery的.html()执行与.innerHTML相同的预期功能，但它还执行跨浏览器兼容性检查。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2085429|因此，只要有可能，您总是可以使用jQuery的.html()而不是.innerHTML。|2085430|entityMap^0|I|7|S|A|0|N|7|X|A|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

<p>If you're wondering about functionality, then jQuery's <code>.html()</code> performs the same <em>intended</em> functionality as <code>.innerHTML</code>, but it also performs checks for cross-browser compatibility.</p>

<p>For this reason, you can always use jQuery's <code>.html()</code> instead of <code>.innerHTML</code> where possible.</p>


blocks|key|2085434|text|innerHTML不是标准的，可能在某些浏览器中不起作用。我已经在所有浏览器中使用html()，没有任何问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2085435|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>innerHTML is not standard and may not work in some browsers. I have used html() in all browsers with no problem.</p>


blocks|key|1871502|text|特别是关于“我能完全依赖于jquery+html()方法吗，它可以像innerHTML一样执行”，我的回答是不能！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1871503|在internet+explorer+7或8中运行它，你就会看到。|1871504|当设置包含嵌套在字符串开头为换行符的标记的超文本标记语言时，jQuery会产生错误的超文本标记！|1871505|这里有几个测试用例，运行时的注释应该是自解释的。这是相当模糊的，但不理解发生了什么是有点令人不安的。我要提交一份错误报告。|1871506|<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"+%2B+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"+%2B+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:+'+%2B+testName+%2B+'\n\n'+%2B
++++++++++++++++++++'The+HTML+:\n"'+%2B+html+%2B+'"\n\n'+%2B
++++++++++++++++++++'looks+like+this+in+the+DOM+when+assigned+with+jQuery.html()+:\n"'+%2B+jqueryDOM+%2B+'"\n\n'+%2B
++++++++++++++++++++'and+looks+like+this+in+the+DOM+when+assigned+with+innerHTML+:\n"'+%2B+innerHTMLDOM+%2B+'"\n\n'+%2B

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

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

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

++++++++++++++++++++);
++++++++++++}

++++++++</script>
++++</head>

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

</html>|code-block|syntax|javascript|1871507|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Specifically regarding "Can I rely completely upon jquery html() method that it'll perform like innerHTML" my answer is NO!</p>

<p>Run this in internet explorer 7 or 8 and you'll see.</p>

<p>jQuery produces bad HTML when setting HTML containing a &lt;FORM&gt; tag nested within a &lt;P&gt; tag where the beginning of the string is a newline!</p>

<p>There are several test cases here and the comments when run should be self explanatory enough. This is quite obscure, but not understanding what's going on is a little disconcerting. I'm going to file a bug report.</p>

<pre><code>&lt;html&gt;

    &lt;head&gt;
        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;   

        &lt;script&gt;
            $(function() {

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

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


                // &lt;P&gt; tag nested within &lt;HTML&gt;
                RunTest("&lt;P&gt; tag nested within &lt;FORM&gt; tag", html2);                 // succeeds in Internet Explorer
                RunTest("&lt;P&gt; tag nested within &lt;FORM&gt; 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&amp;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") 

                    );
            }

        &lt;/script&gt;
    &lt;/head&gt;

    &lt;div id="placeholder"&gt;
        This is #placeholder text will 
    &lt;/div&gt;

&lt;/html&gt;
</code></pre>


blocks|key|1871611|text|这里有一些代码可以帮助您入门。您可以修改.innerHTML的行为--甚至可以创建自己的完整.innerHTML填充程序。(附注:重新定义.innerHTML也适用于火狐，但不适用于Chrome+--他们正在努力解决这个问题。)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1871612|if+(/(msie%7Ctrident)/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)|code-block|syntax|javascript|1871613|http://jsfiddle.net/DLLbc/9/|offset|length|1871614|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>Here is some code to get you started. You can modify the behavior of .innerHTML -- you could even create your own complete .innerHTML shim. (P.S.: redefining .innerHTML will also work in Firefox, but not Chrome -- they're working on it.)</p>

<pre><code>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 &gt; 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)
</code></pre>

<p><a href="http://jsfiddle.net/DLLbc/9/" rel="nofollow">http://jsfiddle.net/DLLbc/9/</a></p>


<p>Can I completely rely upon jQuery's <code>html()</code> method behaving identical to <code>innerHTML</code>? Is there any difference between <code>innerHTML</code> and jQuery's <code>html()</code> method? If these methods both do the same, can I use jQuery's <code>html()</code> method in place of <code>innerHTML</code>?</p>

<p>My problem is: I am working on already designed pages, the pages contains tables and in JavaScript the <code>innerHTML</code> property is being used to populate them dynamically.</p>

<p>The application is working fine on <em>Firefox</em> but <em>Internet Explorer</em> fires an error: <code>unknown runtime exception</code>. I used jQuery's <code>html()</code> method and <em>IE</em>'s error has disappeared. But I'm not sure it will work for all browsers and I'm not sure whether to replace all <code>innerHTML</code> properties with jQuery's <code>html()</code> method.</p>

<p>Thanks a lot.</p>


JQuery html() vs. innerHTML

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我能完全依赖与innerHTML行为相同的jQuery的html()方法吗？innerHTML和jQuery的html()方法有什么区别吗？如果这两种方法的作用相同，我可以用jQuery的html()方法代替innerHTML吗我的问题是:我正在处理已经设计好的页面，这些页面包含表格，并且在JavaScript中，in...

问JQuery html()与innerHTML
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery html()与innerHTMLEN