An useful example on how to extend Javascript

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

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.