JQuery html()与内部HTML

6ss1mwsb 于 2023-03-17 发布在 jQuery

关注(0)|答案(8)|浏览(159)

我可以完全依赖jQuery的html()方法与innerHTML的行为相同吗？innerHTML和jQuery的html()方法之间有什么区别吗？如果这两个方法的行为相同，我可以使用jQuery的html()方法代替innerHTML吗？
我的问题是：我正在处理已经设计好的页面，这些页面包含表格，在JavaScript中，innerHTML属性用于动态填充它们。
应用程序在 Firefox 上运行正常，但 Internet Explorer 触发错误：我使用了jQuery的html()方法，IE 的错误消失了。但我不确定它是否适用于所有浏览器，也不确定是否要用jQuery的html()方法替换所有innerHTML属性。
多谢了。

jquery

来源：https://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml

8条答案

按热度按时间

rur96b6h1#

回答您的问题：
.html()将在检查nodeType等之后调用.innerHTML，它还使用了一个try/catch块，在该块中，它首先尝试使用innerHTML，如果失败，它将优雅地回退到jQuery的.empty() + append()

赞(0）回复(0）举报 2023-03-17

qnyhuwrf2#

特别是关于“我可以完全依赖jquery html（）方法，它会像innerHTML一样执行吗？”我的答案是否定的！
在internet explorer 7或8中运行这个程序，你就会看到。
当设置的HTML包含嵌套在字符串开头为换行符的标记中的标记时，jQuery会生成错误的HTML！
这里有几个测试用例，运行时的注解应该是不言自明的。这是相当模糊的，但不理解发生了什么是有点令人不安的。我打算提交一个bug报告。

<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>

赞(0）回复(0）举报 2023-03-17

pkln4tw63#

如果您想知道功能，那么jQuery的.html()执行与.innerHTML相同的“预期”功能，但它还执行跨浏览器兼容性检查。
因此，您可以尽可能使用jQuery的.html()而不是.innerHTML。

赞(0）回复(0）举报 2023-03-17

8zzbczxx4#

innerHTML不是标准的，可能在某些浏览器中不起作用。我在所有浏览器中都使用过html（），没有任何问题。

赞(0）回复(0）举报 2023-03-17

6jjcrrmo5#

考虑到目前.innerHTML的普遍支持，现在唯一有效的区别是.html()将执行任何<script>标记中的代码，如果您提供给它的html中有任何代码的话。
从jQuery文档中：
根据设计，任何接受HTML字符串jQuery的jQuery构造函数或方法（），.附加（）、.之后（）等-可能会执行代码。这可能通过插入脚本标记或使用执行代码的HTML属性来实现（例如，<img onload="">）。不要使用这些方法插入从不受信任的源（如URL查询参数、Cookie、或表单输入。这样做可能会引入跨站点脚本（XSS）漏洞。在向文档添加内容之前，请删除或转义任何用户输入。
注意：.innerHTML和.html()都可以用其他方式执行js（例如onerror属性）。

赞(0）回复(0）举报 2023-03-17

jxct1oxe6#

“此方法使用浏览器的innerHTML属性。”- jQuery API
http://api.jquery.com/html/

赞(0）回复(0）举报 2023-03-17

bmvo0sr57#

下面是一些代码，您可以修改.innerHTML的行为--甚至可以创建自己的完整.innerHTML shim。重新定义.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)

http://jsfiddle.net/DLLbc/9/

赞(0）回复(0）举报 2023-03-17

envsm3lx8#

一个关键的区别是jQuery的.html()方法执行HTML中的任何内联<script>标记。
这对我来说很关键，因为我使用了一个fetch请求来获取一个response，它的HTML中有<script>标签，作为WordPress中模式工作的一部分。它不工作，我把它缩小到.html()与.innerHTML，我认为它们是相同的。在控制台记录响应并将其复制到文件中并搜索<script>之后，我找到了使用.html()而不是.innerHTML运行的代码。
还有jAndy提到的类型检查。
要执行脚本，请检查RedRiderX在上述注解中链接的问题：如何运行javascript在html加载通过 AJAX
jQuery .html()文档，这对这个利基问题没有多大帮助：https://api.jquery.com/html/

赞(0）回复(0）举报 2023-03-17

我来回答

JQuery html()与内部HTML

8条答案

相关问题

热门标签

最新问答