javascript-override-element-native-function

javascript-override-element-native-function

// From http://webreflection.blogspot.jp/2007/02/could-i-extend-native-function.html
// Basic example
document.createElement = (function(createElement, Element) {
    return function(nodeName) {
        var element, key;
        try {
            element = createElement(nodeName)
        } catch (e) {
            element = createElement.call(document, nodeName)
        };
        for (key in Element)
            element[key] = Element[key];
        return element;
    }
})(document.createElement, {});

// An Example:
// redefine document.createElement native function
// using anonymous function
document.createElement = (
    function(
        // original document.createElementFunction
        createElement,

        // object used to extend created elements
        Element
    ) {

        // new document.createElement function
        return function(

            // type of element (div, p, link, style ... )
            nodeName
        ) {

            // element and key to loop over object
            var element, key;

            // IE like this
            try {
                element = createElement(nodeName)
            }

            // FireFox like that
            catch (e) {
                element = createElement.call(document, nodeName)
            };

            // loop over Element
            for (key in Element)

            // and assign each method to new element
                element[key] = Element[key];

            // return created element
            return element;
        }
    })(
    // send to anonymous, the original function
    document.createElement,

    // send object used to extend created elements too
    {
        // read firstChild node
        read: function() {
            return this.firstChild.nodeValue
        },

        // write text into node
        write: function(text) {
            this.appendChild(document.createTextNode(text))
        }
    }
);

// Usage
onload = function() {
    var div = document.createElement("div");
    document.body.appendChild(div);
    div.write("Hello World !!!");
    alert(div.read()); // Hello World !!!
};