CODEWITHSUNDEEP
javascriptjquerywordpressinnerhtml
edwinbradford
edwinbradford

Reputation: 473

Why are .innerHTML problems not an issue when using JQuery().html()?

I worked out any single instance of document.getElementById("MyID").innerHTML = "A value" in this Javascript World Clock guide causes Wordpress Admin not to load completely and breaks various areas of the Wordpress admin interface.

I solved it by replacing each instance with jQuery("#MyID").html("A value")) which appears to work fine. What is causing .innerHTML to fail miserably but not JQuery().html()?

Upvotes: 3

Views: 2080

Answers (4)

RobG
RobG

Reputation: 147363

About the only difference between what you tried and what jQuery's html method might be doing is removing the content of the element before inserting the new content. So try removing the content first and if you are only inserting plain text, create and insert a text node instead of setting the innerHTML.

So:

function replaceContent(id, s) {
  var el = document.getElementById(id);
  if (el) {
    while (el.firstChild) {
      el.removeChild(el.firstChild);
    }
    el.appendChild(document.createTextNode(s));
  }
}

Upvotes: 0

justkt
justkt

Reputation: 14766

This is likely the pertinent part of the jQuery source:

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

Note that it handles exceptions thrown.

See it for yourself in 1.5.2.

Upvotes: 0

Shaz
Shaz

Reputation: 15867

This is how jQuery does it:

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

Upvotes: 0

cobbal
cobbal

Reputation: 70713

At a guess I would suspect either browser-specific stuff or document.getElementById("MyID") returns null, causing an exception.

Upvotes: 3

Related Questions