wrapping li nodes in IE

"there_are_no_ids_available_argh" <[email protected]> Fri, 02 Jun 2006 13:30:06 -0000
Newsgroups gmane.comp.web.dom.wdf
Message-ID <[email protected]>
Hi, I'm really hoping someone here can help me as I've run out of
ideas and am running behind schedule!

We have implemented a drag-drop list management script which allows
moving, dropping into, removing of <li></li> elements from a
structured <ul> list.

Unfortunately internet explorer doesn't consider <li> tags to be
elements in their own right - skipping the closing </li> tag. This
means that any subordinate <li> or <ul> tags are wrapped in previous
<li> tags - wreaking havok with the drag-drop detection on individual
list elements. 

This is not a problem in other standards compliant browsers 

Our solution has been to wrap the <li> tags in a blank container <div>
tag using server side code. However, we'd like to be able to implement
the script entirely on the client side in some instances. Subsequently
I need to write a DOM script that will iterate through a list wrapping
all <li> elements + their child nodes in a container <div> tag.
Obviously because this is an explorer fault it only needs to work in
explorer.

The problem is that because explorer doesn't seem to recognise <li>
ranges I can't cut everything between <li> and </li> anyway. I've
tried many variant functions (one of which is included below) but
can't come up with a solution.  Any assistance/advice would be most
gratefully recieved.

thanks
brendan.

function wrapLI_elements3(divID) {

    // get container div

  	var oWorkItem  	 =	document.getElementById(divID);

    // get all li child nodes
    var aReturn=oWorkItem.getElementsByTagName("li");

   // declare variables

	var this_val;
	var this_parent;
	var this_node;


	
	for (a=0;a<aReturn.length;a++) {
	        
		var this_node =aReturn[a];
		var this_parent = this_node.parentNode;

		// create a new container div
		var newNode 	= 	document.createElement("div");
		
                /* give the node some  
                   attributes so we can see 
                   this is working
                */

                newNode.style.backgroundColor='yellow';
		newNode.style.border	= '1px blue solid';
		
               // insert the blank container div
                this_parent.insertBefore(newNode);
		
               /* remove current li node and 
                  place it into variable
               */

		var removed_node = this_parent.parentNode.removeChild(this_node);

                // place variable node into container   
		newNode.appendChild(removed_node);
		
		
             } // end for


   

		
	} // end function 





------------------------ Yahoo! Groups Sponsor --------------------~--> 
Get to your groups with one click. Know instantly when new email arrives
http://us.click.yahoo.com/.7bhrC/MGxNAA/yQLSAA/9rHolB/TM
--------------------------------------------------------------------~-> 

Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/wdf-dom/

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/