293238 - document.appendChild(this.image); results in NS_ERROR_DOM_HIERARCHY_REQUEST_ERR

Status: RESOLVED DUPLICATE of bug 118327

(Core :: DOM: Core & HTML, defect)

Description

[Jan]

User-Agent:       Mozilla/5.0 (Windows; U; Win 9x 4.90; en-US; rv:1.7.7) Gecko/20050414
Build Identifier: Mozilla/5.0 (Windows; U; Win 9x 4.90; en-US; rv:1.7.7) Gecko/20050414

I'm trying to add an image object to the document by using:
this.image = new Image();
document.appendChild(this.image);
the javascript console returns the following message:
Error: uncaught exception: [Exception... "Node cannot be inserted at the
specified point in the hierarchy"  code: "3" nsresult: "0x80530003
(NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"  location:
"file:///D:/Mijn%20Documenten/Mijn%20webs/Hond/labjes/diashow.js Line: 233"]
Line 233 is the appendChild instruction


Reproducible: Always

Steps to Reproduce:
1.The HTML includes a .JS file that enables the use of a slideshow
2.The JS file contains an class definition with the above code 
3.The complet code is available on request

Actual Results:  
Execution stops at the given point and the javascript console returns the given
message


Expected Results:  
The image-object should have been added to the document. Otherwise
readystatechange events won't know where they originated, meaning that
event.srcElement will be null.
The code executes in the internet explorer browser.

Comment 1

[Martijn Wargers (dead)]

You can't do it that way, see bug 70590, comment 6.
A document node can only contain one root element, that's why you get the error.
Probably you need document.documentElement.appendChild

Comment 2

[Christian :Biesinger (don't email me, ping me on IRC)]

> Probably you need document.documentElement.appendChild

or document.body.appendChild

Comment 3

[Jan]

(In reply to comment #1)
> You can't do it that way, see bug 70590, comment 6.
> A document node can only contain one root element, that's why you get the error.
> Probably you need document.documentElement.appendChild
Hello Martijn,
Thanks for your reaction.
I looked at bug 70590 and I tried to implement the given solution from comment
7. Unfortunately the "has no properties" error is returned when using the
appendChild method.    
Your suggestion to use "document.documentElement.appendChild" results in
appending the pictures VISIBLY to the document and that's not what I want.
I want to preload images in an event-driven way by linking a function to the
"onreadystatechange" event of the image objects. To let those events know where
they originated, I added them to the document via the appendChild-method. This
should result in the event.srcElement being filled with the appropriate object,
or so it works in the IE-browser.
So, I understand that Mozilla has implemented the document-addChild method in a
different way from IE, resulting in the NS_ERROR_DOM_HIERARCHY_REQUEST_ERR error. 
Now I have to figure out, how to get similar results as from IE.

Thanks again!

Jan 

Comment 4

[Boris Zbarsky [:bzbarsky]]

Events should fire on images whether the image is in a document or not.  Note
that there are no onreadystatechanged events in Mozilla, though, nor an
event.scrElement property (there is event.target, per the DOM specs).

Sounds like appendChild is just buggy in IE; the DOM spec is very clear on what
the right behavior here is.

Comment 5

[:Gavin Sharp [email: [e-mail]]]

*** This bug has been marked as a duplicate of 118327 ***