Overriding native function?

Question

The native document.createElement() is silly-stupid (it takes only a tag name and no attributes). How come I can\'t override it? How come this doesn\'t work?

Answer 1

Why not just use the method in your own function- write it the way you want, and never write document.createElement again....

    document.create= function(tag, parent, attributes){
     tag= document.createElement(tag);
     for(var p in attributes){
      if(p== 'css') tag.style.cssText= attributes.css;
      else if(p== 'text') tag.appendChild(document.createTextNode(attributes.text));
      else tag[p]= attributes[p];

     }
    if(parent) parent.appendChild(tag);
     return tag;
    }

document.create('p',document.body,{css:'font-style:italic',className:'important',title:'title',
text:'whatever text you like'});

Answer 2

Try this.

document.constructor.prototype.createElement = _ => `P for "pwned"`;

console.log(document.createElement("P"));

Answer 3

The proxy pattern mentioned at JavaScript: Overriding alert() should work for this.

It's mentioned in jquery docs but doesn't look like it actually has a dependency on jQuery.

More info here: http://docs.jquery.com/Types#Proxy%5FPattern

Answer 4

As far as I can tell the problem is that a call to the document.createElement() function even when referenced has to be from the document. So modify your code:

var element = originalFunction.call(document, tag);

Answer 5

FWIW (informational): you can override "native" methods, in some cases, and in some browsers at least. Firefox lets me do this:

document.createElement = function(f) { alert(f); };

Which then does as you expect when invoked. But your whole block of code above throws an error, at least via Firebug.

Philosophically, you should be able to do this. You can certainly, say, redefine methods on the Array object, etc. But the window (DOM) methods are not covered by ECMAScript, and so they're probably allowed to be implementation-dependent. And of course, they are this way for security reasons.

Answer 6

There's no way to override that, however you can do some hack around if you not affraid of passing non conventional parameter(s) to a native function. So the thing about createElement that its ment to be the part of the XML DOM, thus you can create whatever tagname you want. And here is the trick, if you pass your attributes as a part of the first parameter (the tagname), separating them with the delimiters of your choise, and then listening to the onchange event of the DOM and if your delimiters are presented in any tag, replace them with the proper markup, using RegExp for example.