asked on

Move a childnode to the bottom of a unordered list with javascript

I have a group of <li> within <ul> I need to move an li to the bottom so I start with

<ul id="ul_group:>
<li>some test in position 1</li>
<li>some test in position 2</li>
<li>some test in position 3</li>
<li>some test in position 4</li>
</ul>

I want to do this

<ul id="ul_group:>
<li>some test in position 2</li>
<li>some test in position 3</li>
<li>some test in position 4</li>
<li>some test in position 1</li>
</ul>

HonorGod

Something like this perhaps?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> moveLI </title>
<script type='text/javascript'>
  function move( id ) {
    var ul = document.getElementById( id )
    if ( ul ) {
      if ( ul.nodeName == 'UL' ) {
        var li = ul.firstChild
        ul.appendChild( li )
      } else {
        alert( 'Unexpected element type: "' + ul.nodeName + '"' )
      }
    } else {
      alert( 'Specified element not found: id="' + id + '"' )
    }
  }
</script>
</head>
<body>
<ul id='ul_group'>
  <li>some test in position 1</li>
  <li>some test in position 2</li>
  <li>some test in position 3</li>
  <li>some test in position 4</li>
</ul>
<input type='button' value='Move' onclick='move("ul_group")'>
</body>
</html>

Open in new window

tech1984

ASKER

That is almost exactly what I needed, though for some reason I have to click twice to get it to change

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HonorGod

Did that work for you?