JQuery .html 与 .attr('innerHTML')

Posted 2023-05-07

【中文标题】JQuery .html 与 .attr(\'innerHTML\')

【英文标题】：JQuery .html vs .attr('innerHTML')JQuery .html 与 .attr('innerHTML')

【发布时间】：2011-10-18 15:55:12

【问题描述】：

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

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

以上和以下有什么区别：

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

？谢谢！

【参考方案1】：

第二个选项，将在 id 为“myE”的 dom 元素上创建一个名为“innerHTML”的属性（如果它不存在），并将值设置为内容。第一个选项会将 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>

【讨论】：

这会影响javascript执行吗？ “内容”中有一些 html/JS，使用 .attr 会导致 javascript 中断，而 .html 不会

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

【参考方案2】：

jAndy 在这里写道：JQuery html() vs. innerHTML

.html() 在对 nodeType 的 & 进行一些检查后只会调用 .innerHTML。它还使用了一个 try/catch 块，它首先尝试使用 innerHTML，如果失败，它会优雅地回退到 jQuerys .empty() + append()

希望这可以澄清情况。

【参考方案3】：

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

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

【参考方案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;
,

这个sn-p来自jQuery source code

希望对你有帮助