我可以完全依赖jQuery的html()
方法,其行为与innerHTML
相同吗? innerHTML
和jQuery的html()
方法之间有什么区别吗?如果这些方法都这样做,我可以使用jQuery的html()
方法代替innerHTML
吗?
我的问题是:我正在处理已设计的页面,页面包含表格,在JavaScript中,innerHTML
属性用于动态填充它们。
该应用程序在 Firefox 上正常运行,但 Internet Explorer 会触发错误:unknown runtime exception
。我使用了jQuery的html()
方法,而 IE 的错误已经消失了。但我不确定它是否适用于所有浏览器,我不确定是否用jQuery的innerHTML
方法替换所有html()
属性。
非常感谢。
答案 0 :(得分:103)
回答你的问题:
在对nodeTypes和stuff进行一些检查之后, .html()
将只调用.innerHTML
。它还使用try/catch
块,首先尝试使用innerHTML
,如果失败,它将优雅地回退到jQuery的.empty()
+ append()
答案 1 :(得分:15)
特别关于“我可以完全依赖于jquery html()方法,它会像innerHTML一样执行”我的答案是否定的!
在Internet Explorer 7或8中运行此功能,您将看到。
jQuery在设置包含< FORM>的HTML时会产生错误的HTML嵌套在< P>内的标签标签,字符串的开头是换行符!
这里有几个测试用例,运行时的注释应该足够自我解释。这是相当模糊的,但不了解正在发生的事情有点令人不安。我要提交错误报告。
<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>
答案 2 :(得分:6)
如果您对功能感到疑惑,那么jQuery的.html()
执行与.innerHTML()
相同的预期功能,但它也会执行跨浏览器兼容性检查。
出于这个原因,请尽可能使用jQuery的.html()
代替.innerHTML()
。
答案 3 :(得分:6)
innerHTML不是标准的,可能在某些浏览器中不起作用。我在所有浏览器中都使用了html(),没有任何问题。
答案 4 :(得分:3)
“此方法使用浏览器的innerHTML属性。” - jQuery API
答案 5 :(得分:1)
鉴于这些天general support of .innerHTML
,现在唯一有效的区别是.html()
将执行任何<script>
代码中的代码,如果html中有任何内容你给它。 .innerHTML
,under HTML5,不会。
按照设计,任何接受HTML字符串的jQuery构造函数或方法 - jQuery(),. append(),. after()等 - 都可能执行代码。这可以通过注入脚本标记或使用执行代码的HTML属性(例如,
<img onload="">
)来实现。请勿使用这些方法插入从不受信任的来源(例如URL查询参数,Cookie或表单输入)获取的字符串。这样做可能会引入跨站点脚本(XSS)漏洞。在向文档添加内容之前删除或转义任何用户输入。
注意:.innerHTML
和.html()
都可以通过其他方式执行js(例如onerror
属性)。
答案 6 :(得分:0)
以下是一些可以帮助您入门的代码。您可以修改.innerHTML的行为 - 您甚至可以创建自己的完整.innerHTML垫片。 (P.S。:重新定义.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)