javascript - innerhtml是什么 - jquery innerhtml用法



JQuery的html()与innerHTML (5)

“此方法使用浏览器的innerHTML属性。” - jQuery API

http://api.jquery.com/html/

https://src-bin.com

我完全可以依赖jQuery的html()方法表现与innerHTML相同吗? innerHTML和jQuery的html()方法有什么区别吗? 如果这两个方法都做同样的事情,我可以使用jQuery的html()方法代替innerHTML吗?

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

该应用程序在Firefox上正常工作,但Internet Explorer触发了一个错误: unknown runtime exception 。 我用jQuery的html()方法, IE的错误消失了。 但我不确定它是否适用于所有浏览器,我不确定是否用jQuery的html()方法替换所有innerHTML属性。

非常感谢。


Answer #1

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


Answer #2

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

出于这个原因,如果可能的话,总是使用jQuery的.html()而不是.innerHTML()


Answer #3

特别是关于“我可以完全依赖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>

Answer #4

这是一些让你开始的代码。 您可以修改.innerHTML的行为 - 甚至可以创建自己的完整.innerHTML填充。 (PS:重新定义.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/





innerhtml