Parent Element question

How can i move an element into another element

[asantos]

How can i change the parent element id of a specific element?

Example:

<li id="3">Number 3
<ul id="basket_3"></ul>
</li>

<li id="4">Number 4
<ul id="basket_4"><li id="5">Move me!</li></ul>
</li>

Currently, the li with id=5 is nested inside basket_4. How can i move it to basket_3?

[jshanman]

var id3 = document.getElementById("3");
var basket3 = document.getElementById("basket_3");
var basket4 = document.getElementById("basket_4");
var id5 = document.getElementById("5");

basket4.removeChild(id5);
basket3.appendChild(id5);

- JS

[asantos]

jshanman, thanks!
it worked alright. one thing: the removeChild isn't necessary at all.

This worked:

basket6 = xajax.$('basket_6');
node8 = xajax.$('node_8');
basket6.appendChild(node_8);

[jshanman]

jshanman, thanks!
it worked alright. one thing: the removeChild isn't necessary at all.

This worked:

basket6 = xajax.$('basket_6');
node8 = xajax.$('node_8');
basket6.appendChild(node_8);

Your right, for some reason I thought it would add another copy of that element to the page with the same id.

Glad it works!
-JS

[asantos]

jshanman (or anybody),

Do you know if there's a way to check if the node ID im moving isnt parent of the target basket ID?
This is my tree:

<ul id="plantilla">
<li id="nodo_1">Page
<ul id="basket_1">
<li id="nodo_2">Sidebar<ul id="basket_2"></ul></li>
<li id="nodo_3">Content
<ul id="basket_3">
<li id="nodo_5">Header<ul id="basket_5"></ul></li>
<li id="nodo_6">Bar<ul id="basket_6"></ul></li>
<li id="nodo_7">Titulo<ul id="basket_7"></ul></li>
<li id="nodo_8">Data<ul id="basket_8"></ul></li>
</ul>
</li>
</ul>
</li>
<li id="nodo_10">Test<ul id="basket_10"></ul></li>
<li id="nodo_4">Footer<ul id="basket_4"></ul></li>
</ul>

If I move Page(1) inside Sidebar(2) it returns an error. Is there a way to pre-check parental relationship before moving it?

[jshanman]

if (basket3.parentNode!= id5) basket3.appendChild(id5);

Is this what you mean?

- JS

[asantos]

Yeah, but that only works for one level. If I have a 4 levels nested list that wouldnt work. I need a way to recursively check the children.

I was working on this js function but im still far to accomplish what I need:

function checkChildren(id) {
var children = document.getElementById('basket_'+id).getElementsByTagName('UL');
for (var index=0; index < children.length; index++) {
alert(children[index]);
}
}

[jshanman]

How about this? (assuming same variables as above)

var x = basket3;
var found = false;
while (typeof x.parentNode!= "undefined" &&!found) {
if (basket3.parentNode == id5) found = true;
}
if (!found) basket3.appendChild(id5);

- JS

[asantos]

jshanman, that doesnt work on multinested trees.

i also came up with this:

if(xajax.$('nodo_'+id_padre_nuevo).parentNode.id == xajax.$('basket_'+id).id) {
alert('is child, so it wont be moved');
} else {
alert('is NOT child, so it will be moved');
}

Of course that only works for one level. how can i implement a recursive algorithm in there?

BTW:
xajax.$ = document.getElementById

[jshanman]

that doesnt work on multinested trees.

I missed an important part of the function before...

This time I actually tested it :)
It now recursivly checks all parents until either its found (returns false), or it gets to the document Element at which the parentNode property is a null object (which returns false).

So you put that in a function like this:
function moveElement(ele,moveTo) {
var x = moveTo;
var found = false;
while (x.parentNode &&!found) {
if (x.parentNode == ele) found = true;
x = x.parentNode;
}
if (!found) result = moveTo.appendChild(ele);
return!found;
}

<ul id="ul0">UL0:
<ul id="ul1">UL1:
</ul>
<ul id="ul2">UL2:
<li id="li1">LI1: move me to ul1</li>
</ul>
</ul>

<input type="button" value="move test 1" onclick="moveElement(document.getElementById('li1'),document.getElementById('ul1'))">

<input type="button" value="try to move parent into child" onclick="moveElement(document.getElementById('ul0'),document.getElementById('ul1'))">

I tested it in IE6 and Firefox 1.5.

- JS

[asantos]

thanks!
ill be testing it on monday at the office (today is holiday in guayaquil, ecuador hehe).

Cheers,
andres