AppendChild不起作用!继承自DOM Element对象。我在这里做错了什么?

时间:2013-04-15 19:07:04

标签: javascript dom prototypal-inheritance appendchild

我正在编写自定义元素,这些元素比标准DOM元素有更多的方法,这里是继承自Element对象的方法

function MyObject(){

    return (Object.create(document.createElement("Mytag"),{
         myfunction:function(){
             return blahblah;
         }
    }));

}//function for creating object ends

function MyObject2(){

    return (Object.create(document.createElement("Mytag2"),{
        myfunction:function(){
            return blahblah;
        }
    }));

}//function for creating second object ends

var a=new MyObject();//statement works fine
var b=new MyObject2();//statement works fine 

现在,当我尝试将其中一个对象作为另一个对象的子对象时,我得到任何工作,而不是抛出异常

a.appendChild(b);

2 个答案:

答案 0 :(得分:0)

由于您使用return (Object.create(...));,因此new MyObject();new MyObject2();会返回对象而不是DOM元素,因此a.appendChild(b)将无效,ab {1}}应该是DOM元素。

要了解其中的差异,请查看此jsFiddle

中的控制台

答案 1 :(得分:0)

您需要将属性描述符传递给Object.create,而不是方法。

function MyObject() {
    return Object.create(document.createElement("Mytag"), {
        myfunction: {
            value: function() {
                 return 'blahblah';
            }
        }
    });
}

这对我在Chrome中有用:

a = new MyObject();
> HTMLUnknownElement {spellcheck: true, isContentEditable: false, contentEditable:
  "inherit", children: HTMLCollection[0], outerText: ""…}
a.myfunction()
> "blahblah"

但请注意,正确地将对象的“类型”设置为MyObject。当我尝试将对象添加到DOM时,它也不会阻止抛出异常:(