DOM experts? node wrap problem

[brendan]

Hi,

I'm trying to wrap all <li> tags within a <div> tag for a drag-drop list
script.
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.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
wrap.appendChild(elementArray[j]);

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

} // end inner for

} // end if

} // end outer for

} // end function


ta
brendan