Cant assign node to document.body?

@whatsInaNameJul 14.2008

I have a node I created, I want to assign it to document.body (so its the only node)…

but I get this error:

Node cannot be inserted at the specified point in the hierarchy
file:///C:/Documents%20and%20Settings/chris/Application%20Data/Mozilla/Firefox/Profiles/oedpmbdl.default/gm_scripts/hdimages_displayonlyimag/hdimages_displayonlyimag.user.js
Line 19

code@19: document.body = CreatedIMG;

to post a comment

JavaScript

16 Comments(s) _↴

@A1ien51Jul 14.2008 — #It would help if you actually showed us the code you were using also.

Eric

@whatsInaNameauthorJul 14.2008 — #here is how I created the node:

<i>
 </i>	var CreatedIMG = document.createElement("img");
 CreatedIMG.setAttribute('src', Found_INPUT[i].value);

At the moment I am using this working code:
document.body.innerHTML = "<img src="" + Found_INPUT[i].value + "">";

but assigning a node to document.body seems more "proper"... I also might have need of it later.

@rnd_meJul 14.2008 — #you cannot clobber body directly.

you can use DOM methods to first remove it, then append a new one to html.

@whatsInaNameauthorJul 14.2008 — #I guess ill keep my current method...

@Declan1991Jul 15.2008 — #I think you meant

<i>
 </i>var CreatedIMG = document.createElement("img");
 CreatedIMG.setAttribute('src', Found_INPUT[i].value);
 document.body.appendChild(CreatedIMG);

To replace the body tag with an image tag would be utterly pointless.

@whatsInaNameauthorJul 15.2008 — #well that only appends the image to the HTML body.

edit: and you are wrong, the browser should still "parse" the img tag even without the body tag. ?

@Jeff_MottJul 15.2008 — #well that only appends the image to the HTML body.[/quote]So does your innerHTML method.

edit: and you are wrong, the browser should still "parse" the img tag even without the body tag.[/quote]You're at the point where you'll need to understand the distinction between a tag and an element. The body [i]element[/i] is always there, even if the tags were omitted. And when you're working with the DOM, you're manipulating elements, not tags, and there must always be a body element. Declan was right.

@whatsInaNameauthorJul 15.2008 — #So does your innerHTML method.[/quote]

My method replaces all HTML with my SRC tag leaving only a image on the website while his method only appends the image to the website....

You're at the point where you'll need to understand the distinction between a tag and an element. The body [i]element[/i] is always there, even if the tags were omitted. And when you're working with the DOM, you're manipulating elements, not tags, and there must always be a body element. Declan was right.[/QUOTE]

lol, this is HTML, not XHTML. Try it yourself, open up notepad and put html, header and a SRC tag between the closing head and closing HTML, it will work.

Now I agree with the point he is making about elements (my bad there) I simle disagree with how HTML would handle it.

In other words, if HTML DOM could throw out the <BODY> and replace it with my created <IMG> my browser should still display the image. But that is a mutt point.

@Jeff_MottJul 15.2008 — #lol, this is HTML, not XHTML. Try it yourself, open up notepad and put html, header and a SRC tag between the closing head and closing HTML, it will work.[/quote]Like I said, you need to understand the distinction between an element and a tag. You clearly don't.

[url=http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.1]HTML 4.01 spec, section 3.2.1 Elements[/url]

Pay special attention to the note at the end of the Elements section. It says the same as I did almost exactly.

My method replaces all HTML with my SRC tag leaving only a image on the website while his method only appends the image to the website....[/quote]Ahh, I see now. You misspoke in your first couple posts. You don't want to replace the body node (in fact you cant, which is what everyone was trying to tell you), you really want to replace the body [i]content[/i].

Using the DOM methods, you would need to loop through the body's children and remove each one, then append the image node. (If you don't need to manipulate the page any further after this point, then innerHTML would certainly seem the simpler solution.)

@whatsInaNameauthorJul 15.2008 — #Like I said, you need to understand the distinction between an element and a tag. You clearly don't.

[url=http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.1]HTML 4.01 spec, section 3.2.1 Elements[/url]

Pay special attention to the note at the end of the Elements section. It says the same as I did almost exactly.

[/quote]

You missing the point man...

Ahh, I see now. You misspoke in your first couple posts. You don't want to replace the body node (in fact you cant, which is what everyone was trying to tell you), you really want to replace the body [i]content[/i].

Using the DOM methods, you would need to loop through the body's children and remove each one, then append the image node. (If you don't need to manipulate the page any further after this point, then innerHTML would certainly seem the simpler solution.)[/QUOTE]

Yeah I know it needs to be looped for each element, its why innerHTML is better...

@Declan1991Jul 15.2008 — #1) innerHTML replaces the innerHTML of the element. If it were outerHTML, you would be correct, however innerHTML and outerHTML are IE variables, innerHTML just happens to be cross-browser.

So,

var CreatedIMG = document.createElement("img");
 CreatedIMG.setAttribute('src', Found_INPUT[i].value);
 document.body.appendChild(CreatedIMG);

is the standard way to do it:document.body.innerHTML = "<img src="" + Found_INPUT[i].value + "">";is the non-standard way, they do the exact same thing.

2) html, head and body tags are optional. Optional means that the parser makes them for you if you don't include them. It doesn't mean they don't exist.

3) I said it would be utterly pointless. There is no advantage (but plenty of disadvantages) to relying on the tag soup parser to correctly parse your HTML.

4) There is an element called img <img> that has an attribute of src, there is no src element.

5) Just because it works doesn't make it correct. Be very vary of that.

EDIT: innerHTML is not better, it's another way of achieving the same thing, and has numerous disadvantages (not including the fact it's not a standard method).

DOUBLE EDIT:

Since I now what your problem was, here is a handy way to do that.

<i>
 </i>var el = document.body;
 while (el.firstChild) {
 document.removeChild(el.firstChild);
 }
 var CreatedIMG = document.createElement("img");
 CreatedIMG.setAttribute('src', Found_INPUT[i].value);
 document.body.appendChild(CreatedIMG);

I thought you were talking about a blank page. I would suggest that you use the WC3 methods if at all possible. In the long run, they will help you avoid problems.

@whatsInaNameauthorJul 15.2008 — #your method threw the image at the very bottom of the page, 100% not what I wanted/needed. To make your method work id have to remove all child elements from body first (both Jeff Mott & rnd me said the same thing).

edit: yeah using that loop is wasted CPU cycle when innerHTML does right away.

@KorJul 15.2008 — #your method threw the image at the very bottom of the page, 100% not what I wanted/needed. To make your method work id have to remove all child elements from body first (both Jeff Mott & rnd me said the same thing).

edit: yeah using that loop is wasted CPU cycle when innerHTML does right away.[/QUOTE]
Sir, before starting a quarrel, even a civilized one, you should make yourself sure that you [I]know[/I] what you are talking about. We are not dealing with "your methods", "his methods" or "my methods", we are dealing with [B]javascript methods[/B].

For your knowledge, you should think a little bit about:

- [B]innerHTML[/B] is [I]not [/I]a standard DOM method; it does not [I]really insert[/I] new elements into the DOM tree. You should use DOM methods for that (google for). You should understand now that innerHTML and DOM methods [I]are not[/I] the same and they [I]do not[/I] the same thing.

- [B]innerHTML[/B] [I]replaces[/I] the content of a node with [I]"visual" tags[/I] (not with [I]true DOM elements[/I], as very well Jeff Mott noted). So, if you need to fully clear the content of a node, you may also used DOM methods:

<i>
 </i>function clearNodeContent(node){
 while(node.hasChildNodes()){
 node.removeChild(node.childNodes[0])
 }
 }

- [B]document.body[/B] is not always a precise referring. It depends on the browser type and on the DOCTYPE used. I suspect the that the standard DOM reference [B]document.getElementsByTagName('body')[0][/B] would be a better option.

@Declan1991Jul 15.2008 — #I did realise that you meant that, and I included the code for it in the post. It's different to Kor's (there are a lot of different ways to do that), but it is advisable.

Ironically, if there are any event handlers in the code that you replace with .innerHTML, it can create a memory leak, which wastes far more resources than a loop to remove the children.

@Jeff_MottJul 15.2008 — #[B]document.body[/B] is not always a precise referring. It depends on the browser type and on the DOCTYPE used. I suspect the that the standard DOM reference [B]document.getElementsByTagName('body')[0][/B] would be a better option.[/QUOTE]
When does document.body not work?

@KorJul 15.2008 — #I agree it is not a real difference. Not in this case. But it's just about a related problem: to get the viewport size you have to use, in IE, document.body or document.documentElement, according to the quirks/standard mode. As I saw such an inconsistency, I swear not to use document.body anymore ?

document.body and document.getElementsByTagName('body')[0] should do the same, I reckon ?

Also in #JavaScript _↴

Collision detection in IE create real time chat sites Slide down menu

Success!

Help @whatsInaName spread the word by sharing this article on Twitter...

Tweet This

Cant assign node to document.body?

16 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Cant assign node to document.body?

16 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #JavaScript _↴