Document.createelement Not Working

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. //

Solution 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"); // worksvar 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.

Solution 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.

Solution 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.

Solution 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 contextvar 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');

Solution 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 errortag("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():

functiontag(tagName) {
    returndocument.createElement(tagName);
}

Of course, jQuery will also create elements for you:

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