AppendChild ne fonctionne pas!, Héritant de l'objet DOM Element..Qu'est-ce que je fais mal ici?

Question

Je vous écris mes éléments personnalisés qui ont des méthodes plus que l'élément standard DOM, ici est celui qui hérite de l'objet 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 

Maintenant, quand j'essaie de faire un de ces objets l'enfant du autre chose que je reçois un à travailler, plutôt une exception est levée

a.appendChild(b); 

Answer 1

Parce que vous utilisez return (Object.create(...));, vos éléments new MyObject(); et new MyObject2(); objets de retour et non DOM, donc a.appendChild(b) ne fonctionnera pas, comme a et b devraient être des éléments DOM.

Pour voir la différence, jetez un oeil à la console dans ce jsFiddle

Answer 2

Vous devez passer descripteurs de propriété-Object.create, pas des méthodes.

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

Cela fonctionne pour moi dans Chrome:

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

Notez cependant que l'on n'a pas correctement réglé le "type" de l'objet à MyObject. Cela n'empêche pas non plus qu'une exception soit levée lorsque j'essaie d'ajouter l'objet au DOM :(