Search code examples
javascriptdomprototypal-inheritanceappendchild

AppendChild does not work!,inheriting from DOM Element object..What Am I doing wrong here?


I am writing my custom elements which have some more methods than the standard DOM element,here is the one that inherits from the Element object

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 

Now when i try to make one of these objects the child of the other I get any thing to work, rather an exception is being thrown

a.appendChild(b);

Solution

  • Because you use return (Object.create(...));, your new MyObject(); and new MyObject2(); return objects and not DOM elements, therefore a.appendChild(b) won't work, as a and b are expected to be DOM elements.

    To see the difference, take a look at the console in this jsFiddle