JQuery .html与.attr('innerHTML')的区别

Question

如果我要设置DOM中DIV元素的内容：

$("#myE").html(contents);

以上两者有任何区别吗：

$("#myE").attr('innerHTML', contents);

? 感谢！

- PCC

Answer 1

jAndy在这里写道：JQuery html() vs. innerHTML .html()将执行一些nodeType和其他检查后，仅调用.innerHTML。它还使用try/catch块，其中它首先尝试使用innerHTML，如果失败，它将优雅地回退到jQuery的.empty() + append()。

希望这可以澄清情况。

- karllindmark

Answer 2

第二个选项会在id为'myE'的dom元素上创建一个属性（如果该属性不存在），并将其值设置为contents。第一个选项将把id为'myE'的dom元素的html内容设置为contents的实际值。

第一个选项会导致：

<div id="myE">
  whatever the value of 'contents' is
</div>

第二种选项会产生如下结果（如果“myE”是一个div）：

<div id="myE" innerHTML="whatever_contents_value_is">
...
</div>

- Joeblackdev

---

这会影响JavaScript执行吗？“contents”中包含一些HTML/JS，使用.attr会导致JavaScript出错，而.html则不会。 - PCC

在这种情况下，我肯定会使用第一种选项 - $("#myE").html(contents);。我以前使用过'attr'函数来设置属性的值，或者在HTML元素上创建属性。 - Joeblackdev

Answer 3

不同之处在于，你的第二个例子直接使用 innerHTML 属性将代码注入到 DOM 中，绕过了一些 jQuery 兼容层，在努力避免一些浏览器问题，特别是 IE 的情况下提供跨浏览器兼容性。

因此，jQuery 的 html() 方法始终是更好的解决方案。更不用说随着 jQuery 1.6 的引入，属性和属性处理方式发生了巨大变化，如果你决定从 jQuery 1.5.x 切换到 1.6.x，你的代码将完全不兼容。曾经历过这种情况。

- user188654

Answer 4

我认为在内部调用innerHTML时，html()没有任何区别：

html: function( value ) {
    if ( value === undefined ) {
        return this[0] && this[0].nodeType === 1 ?
            this[0].innerHTML.replace(rinlinejQuery, "") :
            null;

    // See if we can take a shortcut and just use innerHTML
    } else if ( typeof value === "string" && !rnocache.test( value ) &&
        (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
        !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {

        value = value.replace(rxhtmlTag, "<$1></$2>");

        try {
            for ( var i = 0, l = this.length; i < l; i++ ) {
                // Remove element nodes and prevent memory leaks
                if ( this[i].nodeType === 1 ) {
                    jQuery.cleanData( this[i].getElementsByTagName("*") );
                    this[i].innerHTML = value;
                }
            }

        // If using innerHTML throws an exception, use the fallback method
        } catch(e) {
            this.empty().append( value );
        }

    } else if ( jQuery.isFunction( value ) ) {
        this.each(function(i){
            var self = jQuery( this );

            self.html( value.call(this, i, self.html()) );
        });

    } else {
        this.empty().append( value );
    }

    return this;
},

这个片段来自于jQuery源代码

希望这有所帮助

- wezzy