Re: wrapping li nodes in IE

Hi Brendan,

I've actually written a script that does what you're trying to do, and I 
think this is a case of misdiagnosis - IE actually interprets ul and li 
tags properly so long as you consistently close each correctly. 
Violating the DOM rules of ul/li however will most certainly get you 
inconsistent results across browsers, so the path of wrapping in DIVs 
may actually lead you to a much worse problem.

The HTML I ultimately ended up with was:

<ul>
    <li><span>node</span></li>
    <li><span>node</span>
       <ul>
          <li><span>node</span></li>
          <li><span>node</span></li>
       </ul>
    </li>
</ul>

The onclick sorts of events and collision detection boxes are all based 
on the span tags, not the li tags. A parent li tag containing a ul tag 
rightly contains and is comprised of the child ul's and li's, in both IE 
and the rest of the big 4. When you actually move a node you need to 
check that span's parentNode and move that instead.

Certainly, certainly don't wrap the li tags in divs, a la:
<div><li>node</li></div>

That will definitely make things harder for you.

Cheers,
-Chris Moschini



there_are_no_ids_available_argh wrote:
> 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 --------------------~--> 
Home is just a click away.  Make Yahoo! your home page now.
http://us.click.yahoo.com/DHchtC/3FxNAA/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/