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 objec

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

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 3

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

Answer 4

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 5

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.