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>
tech1984Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HonorGodSoftware EngineerCommented:
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

0
tech1984Author Commented:
That is almost exactly what I needed, though for some reason I have to click twice to get it to change
0
HonorGodSoftware EngineerCommented:
There must be a #text node in there with either an empty string, or a newline, or something.  Try this
<!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' ) {
        for ( var i = 0; i < ul.childNodes.length; i++ ) {
          var li = ul.childNodes[ i ]
          if ( li.nodeName == 'LI' ) {
            ul.appendChild( li )
            break
          }
        }
      } 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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

HonorGodSoftware EngineerCommented:
Did that work for you?
0
tech1984Author Commented:
Awesome thanks!
0
HonorGodSoftware EngineerCommented:
Super.  I'm glad to have been able to help.

Thanks for the grade & points.

Good luck & have a great day.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Components

From novice to tech pro — start learning today.