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()?
At a guess I would suspect either browser-specific stuff or document.getElementById("MyID") returns null, causing an exception.
document.getElementByID("MyID") returns null, then jQuery("#MyID") should return an empty jQuery object, so the .html() call wouldn't do anything.
.html().
.innerHTML code. I actually have just three clocks with identical syntax apart from the values I passed to the functions. It was only when I commented out all references to innerHTML that the errors were resolved.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.
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;
},
html() method answer the question?
html() works and not innerHTML="". What I posted above is exactly how jQuery does its html method. If you can not deduct to why this works the way it does, you should not have marked the other post that shows (only part of) what the method does either.
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));
}
}
<div> to a <span> and also tried a <p> in case it preferred text elements but it made no difference.