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.

Answer 3

jQuery can create new elements for you as simple as:

$("<button />").html("document.Element").appendTo("#myDiv");

To have a reason why your approach is not working, read @Kevin's comment below.

Answer 4

That is happening because document.createElement uses this inside itself. When you call it like document.createElement() then this is set to document. But, when you save it as a variable, then this is no longer document, it's window.

You need to call it with the context.

var tag = document.createElement;  // you are saving the function, not its context
var btn = tag.call(document, 'button'); // you need to set the context

If your browser supports it, you can also use .bind:

var tag = document.createElement.bind(document);
var btn = tag('button');

Answer 5

The reason for this error is that the method lost its context. The method createElement() must be called in the context of a document object.

Try this in a console:

var tag = document.createElement;
tag.call(document, "div");  // no error
tag("div");  // error

The specific details of why createElement() must be called in the context of document are implementation specific, but can easily be guessed at.

So, to maintain context, create a function wrapper for document.createElement():

function tag(tagName) {
    return document.createElement(tagName);
}

Of course, jQuery will also create elements for you:

$("<div>");  // new div element