CODEWITHSUNDEEP
jquery
PCC
PCC

Reputation: 73

JQuery .html vs .attr('innerHTML')

If i am setting the contents of a DIV element in my dom:

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

Is there ANY difference at all between the above and:

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

? Thanks!

Upvotes: 4

Views: 15514

Answers (4)

Joeblackdev
Joeblackdev

Reputation: 7327

The second option, will create an attribute (if it doesn't exist) called 'innerHTML' on the dom element with id 'myE' and set the value to contents. The first option will set the html content of the dom element with id 'myE' to whatever contents actually is.

The first option will result in 

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

The second option will result in (if 'myE' is a div)

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

Upvotes: 6

user188654
user188654

Reputation:

The difference lies in the fact that in your second example you are directly making use of the innerHTML property to inject code into DOM bypassing some of the jQuery compatibility layers which provide cross browser compatibility in an effort to avoid problems with some browsers, especially IE.

Therefore jQuery's html() method is always a better solution. Not to mention that with the introduction of jQuery 1.6 there has been a huge change in the way attributes and properties are treated which would make your code absolutelly incomaptibile if you decide to make a switch from jQuery 1.5.x to 1.6.x. Been there seen that.

Upvotes: 1

karllindmark
karllindmark

Reputation: 6071

jAndy writes the following here: JQuery html() vs. innerHTML

.html() will just call .innerHTML after doing some checks for nodeType's & stuff. It also uses a try/catch block where it trys to use innerHTML first and if that fails, it'll fallback gracefully to jQuerys .empty() + append()

Hope this clarifies the situation.

Upvotes: 6

wezzy
wezzy

Reputation: 5935

i don't think that there's any difference html() call innerHTML internally:

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;
},

This snippet is from jQuery source code

Hope this helps

Upvotes: 0

Related Questions