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/