AppendChild не работает!, Наследуя от объекта DOM Element.. Что я здесь не так делаю?

Question

Я пишу свои пользовательские элементы, которые имеют несколько больше методов, чем стандартный элемент 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);

Answer 1

Потому что вы используете return (Object.create(...));, ваш new MyObject(); а также new MyObject2(); возвращать объекты, а не элементы DOM, поэтому a.appendChild(b) не будет работать, как a а также b как ожидается, будут элементами DOM.

Чтобы увидеть разницу, взгляните на консоль в этом jsFiddle

Answer 2

Вам нужно передать дескрипторы свойств 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:(