Question

I have this:

<div class="slider_controls">
<a class="prev" href="#">Prev</a>
<ul class="pagination">
<li class="current"><a href="#0">1</a></li>
<li><a href="#1">2</a></li>
<li><a href="#2">3</a></li>
<li><a href="#3">4</a></li>
</ul>
<a class="next" href="#">Next</a></div>

I want to make a.prev the first li in the ul.pagination, and a.next last li.

I tried this:

$('ul.pagination li').append($('a.prev'));

but that added the a tags directly into existing li element.

Answer 1

$('ul.pagination').prepend("<li>");
$('ul.pagination li:first').html($('a.prev'));
$('ul.pagination').append("<li>");
$('ul.pagination li:last').html($('a.next'));