Modifying HTML markup

Is there anything we could do to change the html markup?
Currently it is like this:

<div class="wp-pagenavi">
   <span class="pages">...</span>
   <span class="current">...</span>
   <a class="page">...</a>
   <a class="page">...</a>
   <a class="page">...</a>
</div>

What can I do to change it into something like this? I need to place .pages outside the rest

<div class="wp-pagenavi">
   <span class="pages">...</span>
   <div class="inside-wrapper">
      <span class="current">...</span>
      <a class="page">...</a>
      <a class="page">...</a>
      <a class="page">...</a>
   </div>
</div>