Advanced Javascript: part 7

UTIL.DOM: Creating your own html extension functions

It's convenient to work with some kind of html element proxy but the clone method does not work properly in IE. No need to worry though. You can still add convenience methods on original objects without cloning them. That's what javascript is all about... change runtime behaviour of objects.

So I wrote an extend function which takes an html element as parameter and dynamically adds behaviour.

Since we want to these extensions for free by default, we write our own get method for retrieving elements

You can now clear the container in 1 statement:

var myContainer = DOM.get("some-id");
myContainer.clear();

Adding an event handler or event listener using our own method allows us to add behaviour later on easily. An example is shown below:

It also becomes very easy to style elements using CSS.