document.createElement not working

Question

I am creating a plugin using jQuery library.

Here i am storing String.prototype in a variable then i am using this variable to extend my Sting object. And this is working fine.

// String Prototyping store in a variable
// Save bytes in the minified version of js
var StrProto = String.prototype;
String.prototype.toProperCase = function () {
  return this.replace(/\w\S*/g, function (txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });
};
// working fine
alert("yogesh kumar".toProperCase());

In the next case i am creating m function xyz which stored in abc variable and this is also working fine.

function xyz(x){
  alert(x)
}
var abc = xyz;
// working fine
abc("yogesh kumar");

In the last case i am storing document.createElement in a variable tag and using tag to create a button. but this is not working.

var tag=document.createElement;
$(document.createElement("button")).html("document.Element").appendTo("#myDiv");

// not working
$(tag("button")).html("tag").appendTo("#myDiv");

Please check the link on jsFiddle:

click here

Error:

In Chrome

• Uncaught TypeError: Illegal invocation

in Firefox

• Error: NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument

Why this error?

What is the solution?

Answer 1

You are getting a reference to a function that is a member of the document. When you call that reference directly, it's context is now the window rather than the document. Here's an example:

http://jsfiddle.net/DeCNx/

var foo = {
  createElement: function(tagname) {
    if (this._secretvarthatisneeded) {
      console.log(tagname + " Element Created!");
    }
  },
  _secretvarthatisneeded: true
}

foo.createElement("FOOBAR"); // works

var bar = foo.createElement;
bar("BARFOO"); // doesn't work
bar.call(foo,"BARBAR") // works

Since the context was lost, the bar() call didn't result in a console.log();

obviously this is just a simplification to demonstrate.

Update: For the use you are making, i'd suggest doing this:

$.createElement = function(tagName,attributes){
    return $(
        document.createElement(tagName),
        attributes ? attributes : {}
    )
}

Now you can simply do $.createElement("button").html("tag").appendTo("#myDiv"); It is fast and still easy to read. Note however IE has problems with inputs, if you're creating input elements, i suggest using $("<input type='text' />") rather than this.

Answer 2

Use the bind() method for "assigning" the native JS method to a variable:

var ce = document.createElement.bind(document);
var elem = ce('div');
alert(elem.nodeName);

Works in modern browsers including IE9+. For older browsers, use a wrapper function.