Error with appendChild: Node cannot be inserted at the specified point in the hierarchy

Question

There is an error with the function appendChild : Node cannot be inserted at the specified point in the hierarchy

JS :

var abc=document.createElement("div");
abc.style.position="absolute";
abc.style.width="10px";
abc.style.height="10px";
abc.style.left="10px";
abc.style.top="10px";
abc.style.backgroundColor="black";
abc.innerHTML="abc";
document.appendChild(abc);

http://jsfiddle.net/T7ZMX/

Can you please help me?

Answer 1

You need to append to document.body, not just document.

To explain why document.appendChild doesn't work consider the following diagram :

If that would be allowed that wouldn't be very useful since it will be a sibling of the HTML root element, that make it totally outside the content.

For more information : Using the W3C DOM Level 1 Core