Adding element after others

Adding element after others

I have a page with several uls which are enclosed within a div like so:

  1. <div id="post_holder">
  2.       <ul>
  3.             <li></li>
  4.       </ul>
  5.       <ul>
  6.             <li></li>
  7.       </ul>
  8. </div>
i am trying to insert another ul underneath the others within the div. however it inserts the new ul underneath the first ul in the list rather than at the bottom. can anyone see where i am going wrong?

  1. var ni = document.getElementById('post_holder');
  2. var new_post = document.createElement('ul');
  3. ni.parentNode.insertBefore(new_post, ni.nextSibling);
the code has been shortened to the important bits.