Add button dynamically (jquery)

Question

I want to make pagination with jquery and Ajax. The first where I'm stumbling on is how I can add a button

<div class="btn-group" id="pagination_group">
        <button class="btn" disabled="disabled">First</button>
        <button class="btn" disabled="disabled">Prev</button>
        <button class="btn btn-primary" id="p1">1</button>
        <button class="btn" id="p2">2</button>
        <button class="btn" id="p3">3</button>
        <button class="btn" id="p4">4</button>
        <button class="btn" id="p5">5</button>
        <button class="btn" id="next">Next</button>
        <button class="btn" id="last">Last</button>
    </div>

Something with append()? But how to get it it the right place? The idea is after click on Next remove btn with id="p1" ( that's no problem) and add button with id="p6" between button5 and button Next.

Thank you for your advice.

Answer 1

$("#next").click(function(){
    $("#p1").remove();
    $("#next").before($('<button class="btn" id="p6">6</button>'));
})

Answer 2

Possibly several ways to accomplish this. See this working example