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

There appendChildis an error in the function :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 help me?

+5
source share
1 answer

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

To explain why it document.appendChilddoes not work, consider the following diagram:

DOM tree

If this is allowed, it will not be very useful, as it will be a sibling of the root HTML, which will make it completely outside the content.

For More Information: Using the W3C Level 1 DOM Kernel

+20
source

All Articles