JQuery html() 与 innerHTML

IT技术 javascript jquery html dom innerhtml
2021-02-25 01:23:36

我可以完全依赖 jQuery 的html()行为方式innerHTML吗?innerHTML和 jQuery 的html()方法有什么区别吗?如果这些方法都做同样的事情,我可以使用 jQuery 的html()方法来代替innerHTML吗?

我的问题是:我正在处理已经设计好的页面,页面包含表格,并且在 JavaScript 中,该innerHTML属性用于动态填充它们。

该应用程序在Firefox上运行良好,Internet Explorer引发错误:unknown runtime exception我使用了 jQuery 的html()方法,IE的错误消失了。但我不确定它是否适用于所有浏览器,我不确定是否innerHTML用 jQuery 的html()方法替换所有属性

非常感谢。

6个回答

回答你的问题:

.html().innerHTML在对 nodeTypes 和其他东西进行一些检查后调用它还使用一个try/catch块,它innerHTML首先尝试使用,如果失败,它将优雅地回退到 jQuery 的.empty()+append()

2021-04-27 01:23:36
请注意,对于 Internet Explorer 8(并且很可能更早),附加检查可能会显着增加大型插入的性能,因此如果 IE 上的性能很重要,您可能需要考虑innerHTML直接使用
2021-04-28 01:23:36

特别是关于“我能否完全依赖 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>
这仍然在 IE9 中,只需尝试一下: $("body").html("<p><form><div>See what I did there ?</div></form></p>" );
2021-04-19 01:23:36
我认为这个错误报告告诉我我有关于 <P> 标签中允许的内容无效的 HTML - 或类似的东西。这是很久以前的事了,所以我不确定是否有任何改变,但是 3 年后这仍然得到了赞成,所以如果有人要添加任何内容,请添加评论
2021-05-16 01:23:36

如果您想了解功能,那么 jQuery 会.html()执行与 相同的预期功能.innerHTML,但它还执行跨浏览器兼容性检查。

出于这个原因,您始终可以使用 jQuery.html()而不是.innerHTML在可能的情况下。

innerHTML 是文档/元素属性上的一个属性,而不是一个方法。
2021-05-09 01:23:36

innerHTML 不是标准的,可能无法在某些浏览器中使用。我在所有浏览器中都使用过 html() 没有问题。

现在是标准的(不知道问这个问题的时间):domparsing.spec.whatwg.org/#innerhtml
2021-04-17 01:23:36

鉴于这些天普遍支持,.innerHTML现在唯一有效的区别是,如果您提供的 html 中有任何标签.html()则将执行任何<script>标签中的代码.innerHTML在 HTML5 下,不会。

来自jQuery 文档

按照设计,任何接受 HTML 字符串的 jQuery 构造函数或方法——jQuery()、.append()、.after() 等——都可以潜在地执行代码。这可以通过注入脚本标签或使用执行代码的 HTML 属性(例如,<img onload="">)来发生。不要使用这些方法插入从不受信任的来源获取的字符串,例如 URL 查询参数、cookie 或表单输入。这样做可能会引入跨站点脚本 (XSS) 漏洞。在向文档添加内容之前删除或转义任何用户输入。

注:两者.innerHTML.html()可以执行JS其他方式(如onerror属性)。

它有点旧,但我仍然认为另一个答案的解决方案今天会很好用。如果您使用 jQuery,您当然可以只使用 .html()。
2021-05-04 01:23:36
现在我再看一遍,这个答案确实错过了script从更大的 html 片段中解析标签的步骤也许一个新的问题/答案是有序的?
2021-05-05 01:23:36
很有意思。那么我们如何强制 HTML5 在插入时执行 <script> 标签呢?
2021-05-14 01:23:36