JQuery的html（）与innerHTML
我可以完全依赖jQuery的html()方法行为相同的innerHTML ？ innerHTML和jQuery的html()方法有什么区别吗？ 如果这两个方法都做同样的事，我可以用jQuery的html()方法代替innerHTML吗？
我的问题是：我正在devise已经devise好的页面，页面包含表格，而在JavaScript中，正在使用innerHTML属性dynamic地填充它们。
该应用程序在Firefox上正常工作，但Internet Explorer触发一个错误： unknown runtime exception 。 我用jQuery的html()方法和IE的错误已经消失。 但我不确定它会适用于所有的浏览器，我不确定是否用jQuery的html()方法replace所有的innerHTML属性。
非常感谢。
回答你的问题：
.html()将在对nodeTypes和东西进行一些检查之后调用.innerHTML 。 它也使用了一个try/catch块，它试图首先使用innerHTML ，如果失败，它将优雅地回.empty() jQuery的.empty() + append()
特别是关于“我可以完全依靠jQuery的HTML（）方法，它会像innerHTML一样执行”我的答案是不！
运行在Internet Explorer 7或8中，你会看到。
当设置包含嵌套在<P>标签内的<FORM>标签的HTML时，jQuery生成错误的HTML，其中string的开头是换行符！
这里有几个testing用例，运行时的注释应该足够自我解释。 这是相当模糊的，但不了解发生了什么是有点令人不安。 我将要提交一个错误报告。
<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>
innerHTML不是标准的，在某些浏览器中可能不起作用。 我已经在所有浏览器中使用了html（），没有任何问题。
如果您想知道function，那么jQuery的.html()执行与.innerHTML()相同的function，但是它也会执行跨浏览器兼容性检查。
由于这个原因，在可能的情况下总是使用jQuery的.html()而不是.innerHTML() 。
“这个方法使用浏览器的innerHTML属性。” – jQuery API
这里有一些代码让你开始。 您可以修改.innerHTML的行为 – 甚至可以创build自己的完整.innerHTML填充。 （PS：重新定义.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)
