Bhu*_*upi 76 html javascript jquery dom innerhtml
我可以完全依赖jQuery的html()方法表现相同innerHTML吗？innerHTML和jQuery的html()方法有什么区别吗？如果这些方法都这样做,我可以使用jQuery的html()方法代替innerHTML吗？
我的问题是:我正在处理已设计的页面,页面包含表格,在JavaScript中,该innerHTML属性用于动态填充它们.
该应用程序在Firefox上工作正常,但Internet Explorer会触发错误:unknown runtime exception.我使用jQuery的html()方法,IE的错误消失了.但我不确定它是否适用于所有浏览器,我不确定是否innerHTML用jQuery的html()方法替换所有属性.
非常感谢.
jAn*_*ndy 107
回答你的问题:
.html()将.innerHTML在对nodeTypes和stuff进行一些检查后调用.它还使用了一个try/catch首先尝试使用的块,innerHTML如果失败,它将优雅地回退到jQuery的.empty()+append()
Sim*_*ver 17
特别关于"我可以完全依赖于jquery html()方法,它将像innerHTML一样执行"我的答案是否定的!
在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>
如果您对功能感到疑惑,那么jQuery会.html()执行与之相同的预期功能.innerHTML(),但它也会执行跨浏览器兼容性检查.
出于这个原因,总是使用jQuery .html()而不是.innerHTML()尽可能使用jQuery .
innerHTML不是标准的,可能在某些浏览器中不起作用.我在所有浏览器中都使用了html(),没有任何问题.
鉴于目前的普遍支持.innerHTML，现在唯一有效的区别是，如果您提供的 html 中有任何标签.html()，则将执行任何标签中的代码。<script>.innerHTML，在 HTML5 下，不会。
来自jQuery 文档：
\n\n\n\n\n根据设计，任何接受 HTML 字符串 \xe2\x80\x94 jQuery()、.append()、.after() 等 \xe2\x80\x94 的 jQuery 构造函数或方法都可能执行代码。这可以通过注入脚本标记或使用执行代码的 HTML 属性（例如
\n<img onload="">）来实现。请勿使用这些方法插入从不受信任的来源（例如 URL 查询参数、cookie 或表单输入）获取的字符串。这样做可能会引入跨站点脚本 (XSS) 漏洞。在将内容添加到文档之前，删除或转义任何用户输入。
注意： 和.innerHTML都.html()可以通过其他方式执行js（例如onerror属性）。
| 归档时间： |
|
| 查看次数： |
165513 次 |
| 最近记录： |