[thelist] sorting an <ol> using the dom

Craig Saila crsaila at yahoo.ca
Fri Mar 1 10:13:02 CST 2002

Bill Lovett wrote:
> document.getElementById('foo').childNodes[i].innerText

For future compatibility you may want to use .nodeValue instead of
.innerText (which, I think, is IE-specific).

> I can extract the text of each <li>, and from there, do the sort. What I
> can't figure out is how to update the page with that new order. Anyone
> have any ideas?

Here's where you'll want to use replaceChild. Haven't tested this but
this may point you in the right direction:

f1-1) var sObj = document.getElementById('foo')
f1-2) var content = sObj.childNodes[i].nodeValue
f1-3) var new_list_item = sObj.childNodes[i]

f2-1) var sObj = document.getElementById('foo')
f2-2) var target_list_item_position = sObj.childNodes[sorted]
f2-3) sObj.replaceChild(new_list_item,target_list_item_position)

Essentially, you grab the content of the list item (line f1-2), get a
reference to its node position (f1-2), get a reference to what node it
should be when alphabetized (f2-2, via the "sorted" variable)  (f2-2),
and put the new node where the old one was (f2-3).

You'll probably want to grab the content of the li in one function, and
replace them in another.

Scott Andrew has some great DOM tutorials that may help more:


Craig Saila
craig at saila.com  :  http://www.saila.com/

Do You Yahoo!?
Get your free @yahoo.com address at http://mail.yahoo.com

More information about the thelist mailing list