Question

如果我在我的dom中设置DIV元素的内容：

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

以上与之间是否存在任何差异：

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

？谢谢！

Answer 1

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

第一个选项将导致

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

第二个选项将导致（如果'myE'是div）

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

Answer 2

jAndy在此处写下以下内容：JQuery html() vs. innerHTML

.html（）只需在对nodeType＆amp;＆amp ;;进行一些检查后调用.innerHTML。东西。它还使用try / catch块，它首先尝试使用innerHTML，如果失败，它将优雅地回退到jQuerys .empty（）+ append（）

希望这能澄清情况。

Answer 3

不同之处在于，在第二个示例中，您直接使用innerHTML属性将代码注入DOM，绕过一些jQuery兼容层，这些层提供跨浏览器兼容性以避免出现问题有些浏览器，特别是IE。

因此，jQuery的html()方法总是更好的解决方案。更不用说随着jQuery 1.6的引入，属性和属性的处理方式发生了巨大变化，如果您决定从jQuery 1.5.x切换到1.6.x，这将使您的代码绝对不可分割。看到那个。

Answer 4

我认为html（）内部调用innerHTML没有任何区别：

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

希望这有帮助

JQuery .html vs .attr（'innerHTML'）

4 个答案: