Changing HTML content using jQuery

Changing HTML content using jQuery

I need to change this HTML:

  1. <div class="wp-pagenavi">
  2.     <ul>
  3.         <li class="active"> <span>1</span> </li>
  4.         <li> <a rel="start" data-ci-pagination-page="10" href="http://devserver/index.php/blog/page/10">2</a>
  5.         </li> <li class="next"> <a rel="next" data-ci-pagination-page="10" href="http://devserver/index.php/blog/page/10">→</a></li>
  6.     </ul>
  7. </div>

To this one:

  1.     <span class="current">1</span>
  2.     <a href="#" class="page">2</a>
  3.     <a href="#" class="page">3</a>
  4.     <a href="#" class="page">4</a>
  5.     <a href="#" class="page">5</a>
Links are generated dinamically so today as the example show are 1,2,3,4 but maybe tomorrow can be 1,2,3 or 1,2,3,4,5,6 or wathever so changing it static wont work. Also I've added a container for the UL so can I use $('.wp-pagenavi') instead of just ul. Using jQuery. I think to use the method .replaceWith() but don't know how to maitain values. Samples for doc aren't enough to get this working, any advice?