Can a DIV change it's parent element?

[dd]

I need to know whether an element can move itself to a new parent
within the DOM. I can't find any function that offers me such an
ability. Here's an example of a hierarchy:

-body
....div 1 (parent == body)

.... div 2 (parent == body)
.... ... div 3 (parent == div 2)
.... ... ... div 4 (parent == div 3)


What I'd like to do is allow code to change div 4 so that it no longer
has div 3 and div 2 in its parent hierarchy. I'd like it to be in the
same state as div 1, having document.body as its parent.

By having those div 2 and 3 in it's parent hierarchy it's limited by
them in terms of Zindex (even if div 4 sets it's own zindex to 9999999,
it's really only as high as div 3 and div 2). There are also other
potential CSS issues I'm trying to avoid. I'm not expecting a positive
answer here but I figured I'd try.

What I want to try and avoid is creating a new DIV at the body level
because I don't want (IE) to have to wait for document.readyState ==
complete.

 

[RobG]

I need to know whether an element can move itself to a new parent
within the DOM. I can't find any function that offers me such an
ability.

Use the Node interface's appendChild method:

<URL: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107 >

Wrapped in a simple function:

function setParent(el, newParent) {
newParent.appendChild(el);
}

Here's an example of a hierarchy:

-body
...div 1 (parent == body)

... div 2 (parent == body)
... ... div 3 (parent == div 2)
... ... ... div 4 (parent == div 3)

Using the function above, and presuming div 4 has id=div4:

setParent(document.getElementById('div4'), document.body);


or just:

document.body.appendChild(document.getElementById('div4'));

What I'd like to do is allow code to change div 4 so that it no longer
has div 3 and div 2 in its parent hierarchy. I'd like it to be in the
same state as div 1, having document.body as its parent.

Done, see above.

By having those div 2 and 3 in it's parent hierarchy it's limited by
them in terms of Zindex (even if div 4 sets it's own zindex to 9999999,
it's really only as high as div 3 and div 2). There are also other
potential CSS issues I'm trying to avoid. I'm not expecting a positive
answer here but I figured I'd try.

In regard to CSS issues, you should discuss those at
comp.infosystems.www.authoring.stylesheets:

<URL:
http://groups.google.com.au/group/comp.infosystems.www.authoring.stylesheets

 

[dd]

Thanks Rob, I'd figured I could do that, but what I didn't emphasize
enough in my question (I see now) is the issue of doing stuff like this
before document.readyState == "complete" on IE. Do you think that it's
helpful that this isn't creating any new elements, instead it's just
moving one around within the DOM? I'm not sure if that distinction
makes a difference when it comes to IE not liking certain DOM
manipulations before it's completed loading.