Today I found out I could extend the functionality of __EXISTING__ html classes with javascript.
I was manipulating DOM objects, better known as HTMLElement objects, and I needed a way to print the HTML that represents the tag of the object, not what’s contained by the tags… a friend told me there was a method called “outerHTML”, and I thought he was joking, but it certainly makes sense after the precious “innerHTML” method (which is one of the only things which I thank IE for).
So, the same story for outerHTML, it is not supported by mozilla browsers, but little did I know, that existing class functionality can be extending using the prototypes… see how you can add .outerHTML compatibility to your page, just paste this in one of generic libraries:
//In order to allow .outerHTML in Firefox, we add this.
var _emptyTags = {
"IMG": true,
"BR": true,
"INPUT": true,
"META": true,
"LINK": true,
"PARAM": true,
"HR": true
};
HTMLElement.prototype.__defineGetter__("outerHTML", function () {
var attrs = this.attributes;
var str = "<" + this.tagName;
for (var i = 0; i < attrs.length; i++)
str += " " + attrs[i].name + "="" + attrs[i].value + """;
if (_emptyTags[this.tagName])
return str + ">";
return str + ">" + this.innerHTML + "" + this.tagName + ">";
});
Now If you’re doing something say with scriptaculous…
someTD = Builder.node(‘td’, {‘valign’:’top’},[someNode, someNode2, someNode3])
and you need to get the HTML for someTD, all you do is:
someTD.outerHTML
and it will work on both IE and Firefox.
Enjoy.
Enjoy.