View Full Version : wrapping tags in container tags

05-09-2006, 12:23 PM

I'm trying to wrap all <li> tags within a <div> tag for a drag-drop list
This is because of i.e's serious problems rendering list elements as objects
in their own right (http://www.satzansatz.de/cssd/onhavinglayout.html).

At the moment we're using .php to do this, but I'd like the script to work
regardless of whether the content is dynamic or not.
The obvious solution is to use the DOM to traverse the page and wrap any
<li> tags within <div> tags

but I'm having problems actually implementing the script in a way that the
li elements are copied with all their attributes (onmouseover, onmouseout
etc) intact, in the order they are currently in the list
Here's where I stand ... any ideas?

function wrapLI_elements(divID) {

// divID is HTMLobject

UL_array = divID.getElementsByTagName('ul');
var wrap; // used as outer-wrap object

for(i=0;i<UL_array.length;i++) { // traverse UL elements

elementArray = UL_array[i].getElementsByTagName('li');

if(elementArray) {

for(j=0;j<elementArray.length;j++) {

wrap = document.createElement('div');
wrap.style.backgroundColor='yellow'; // I have added this to
highlight the swapped elements, will be removed when script works

UL_array[i].appendChild(wrap); // append wrapped div with
internal li element to UL
UL_array[i].removeChild(elementArray[j]); // remove existing LI

} // end inner for

} // end if

} // end outer for

} // end function


05-09-2006, 01:26 PM
when removing the childs of a parent using a loop, you must use a backwards decremental loop, because with every removment, the length of the collection decreases.

On the other hand, you may use another aproach. have you considered replaceChild() method?