JQuery html()与innerHTML
我能完全依赖与innerHTML行为相同的jQuery的html()方法吗？innerHTML和jQuery的html()方法有什么区别吗？如果这两种方法的作用相同，我可以用jQuery的html()方法代替innerHTML吗
我的问题是:我正在处理已经设计好的页面，这些页面包含表格，并且在JavaScript中，innerHTML属性被用来动态地填充它们。
该应用程序在Firefox上运行良好，但Internet Explorer会触发一个错误：unknown runtime exception。我使用了jQuery的html()方法，IE的错误已经消失了。但我不确定它是否适用于所有浏览器，也不确定是否要用jQuery的html()方法替换所有的innerHTML属性。
非常感谢。
回答 6
Stack Overflow用户
发布于 2010-08-25 13:43:44
回答你的问题：
在对nodeTypes和其他东西做了一些检查之后，.html()只会调用.innerHTML。它还使用了一个try/catch块，它首先尝试使用innerHTML，如果失败了，它将优雅地退回到jQuery的.empty() + append()
Stack Overflow用户
发布于 2010-11-23 06:42:10
特别是关于“我能完全依赖于jquery html()方法吗，它可以像innerHTML一样执行”，我的回答是不能！
在internet explorer 7或8中运行它，你就会看到。
当设置包含嵌套在字符串开头为换行符的标记的超文本标记语言时，jQuery会产生错误的超文本标记！
这里有几个测试用例，运行时的注释应该是自解释的。这是相当模糊的，但不理解发生了什么是有点令人不安的。我要提交一份错误报告。
<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>Stack Overflow用户
发布于 2010-08-25 14:05:59
如果您想知道功能，那么jQuery的.html()执行与.innerHTML相同的预期功能，但它还执行跨浏览器兼容性检查。
因此，只要有可能，您总是可以使用jQuery的.html()而不是.innerHTML。
https://stackoverflow.com/questions/3563107
复制相似问题