nextSibling in Firefox

[tinfanide]

<script>window.onload = function(){	if(document.getElementById("menu").nextSibling.nodeType !=1){		document.getElementById("menu").nextSibling = document.getElementById("menu").nextSibling.nextSibling;		}	document.getElementById("menu").onclick = change;	}function change(){	document.getElementById("menu").nextSibling.style.backgroundColor = "#FC0";	}</script>

My question is:Why I must use variables (see below) to replace document.getElementById("menu").nextSibling?Can't I do things like above?When I do things like above, FF console reports "document.getElementById("menu").nextSibling.style" is undefined and IE8 cannot work it out (Error page).

<script>window.onload = function(){	e = document.getElementById("menu").nextSibling;	if(e.nodeType !=1){		e = e.nextSibling;		}	document.getElementById("menu").onclick = change;	}function change(){	e.style.backgroundColor = "#FC0";	}</script>

<div id="menu" style="width: 300px; background-color: yellow">Menu<div>SubMenu</div></div><div style="width: 300px; background-color: #6FF">Content</div>

[justsomeguy]

You can't just assign nodes like that. There are other ways to move the nodes. The second piece of code doesn't replace anything, you're just assigning different nodes to the variable e.http://www.w3schools.com/dom/dom_nodes_replace.asphttp://www.w3schools.com/dom/dom_nodes_add.asp

[tinfanide]

You can't just assign nodes like that. There are other ways to move the nodes. The second piece of code doesn't replace anything, you're just assigning different nodes to the variable e.http://www.w3schools.com/dom/dom_nodes_replace.asphttp://www.w3schools.com/dom/dom_nodes_add.asp

For the second piece, I just wanted to use nextSibling to refer to the neighbouring element.It does change the background colour as expected. Then, what do you mean by "just assigning different nodes to the variable e"?

[justsomeguy]

When you do this:

e = document.getElementById("menu").nextSibling;	if(e.nodeType !=1){		e = e.nextSibling;		}

You are not changing the nodes. You are changing the variable e to point to different nodes. Your other code looks like you're actually trying to move or change nodes with this:document.getElementById("menu").nextSibling = document.getElementById("menu").nextSibling.nextSibling;That looks like you're trying to move or copy one node to another one. That's not how DOM nodes work. The other piece of code is just changing which node the variable e points to, but assigning things to e doesn't change the DOM nodes.

[tinfanide]

When you do this:

e = document.getElementById("menu").nextSibling;	if(e.nodeType !=1){		e = e.nextSibling;		}

You are not changing the nodes. You are changing the variable e to point to different nodes. Your other code looks like you're actually trying to move or change nodes with this:document.getElementById("menu").nextSibling = document.getElementById("menu").nextSibling.nextSibling;That looks like you're trying to move or copy one node to another one. That's not how DOM nodes work. The other piece of code is just changing which node the variable e points to, but assigning things to e doesn't change the DOM nodes.

So according to the DOM nodes, how can I change the nodes? Ya mean that is the way in the XML tutorial where appendChild, replaceChind all of that stuff is used?

[justsomeguy]

Yes, you can use insertBefore to move a node. If the node you're inserting already exists it will be moved.

[tinfanide]

Yes, you can use insertBefore to move a node. If the node you're inserting already exists it will be moved.

Okay. I'll have a go-through on the XML tutorial which is brand new to me first. Thanks.