javascript - document.createElement不起作用

我正在使用jQuery库创建一个插件。

在这里，我将String.prototype存储在一个变量中，然后使用此变量扩展我的Sting对象。这工作正常。

// 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());

在下一种情况下，我正在创建存储在其中的m函数xyz
abc变量，也可以正常工作。

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

在最后一种情况下，我将document.createElement存储在变量中
标签并使用标签创建按钮。但这不起作用。

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

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

请检查jsFiddle上的链接：


  click here


错误：

在Chrome中


未捕获的TypeError：非法调用


在Firefox中


错误：NS_ERROR_XPC_BAD_CONVERT_JS：无法转换JavaScript
论点


为什么会出现这个错误？

解决办法是什么？

最佳答案

您将获得对作为文档成员的函数的引用。当您直接调用该引用时，它的上下文现在是窗口而不是文档。这是一个例子：

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

由于上下文丢失，因此bar()调用不会导致console.log();

显然，这只是一个简化的演示。

更新：对于您正在使用的用途，我建议您这样做：

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

现在，您只需执行$.createElement("button").html("tag").appendTo("#myDiv");即可快速且仍然易于阅读。但是请注意，但是IE在输入方面存在问题，如果要创建输入元素，建议不要使用$("<input type='text' />")。

关于javascript - document.createElement不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14202699/