How do I add html tags after the last element with jQuery?

Question

This is how my html look likes :

<div class ="categorie">
    <input class="checkbox_category" type="checkbox" value="174" >sdfasdf</input><br>
    <input class="checkbox_category" type="checkbox" value="175" >bnmbn</input><br>
    <input class="checkbox_category" type="checkbox" value="176" >bnmbn</input><br>
    <div>test</div>
</div>

This is the js code that I tried:

$(".categorie input:last").append("<input  class='' alt='' value='"+id+"' type='checkbox'>"+category+"</input>");

I just want to add a html code after the last input or the last class checkbox_category. What am i missing ?

Answer 1

It should just be

$('.categorie').append(...)

That appends it to the end after any current content

$(function(){
    $('.categorie').append('<input class="checkbox_category" type="checkbox" value="176" >new</input><br>')  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="categorie">
    <input class="checkbox_category" type="checkbox" value="174" >sdfasdf</input><br>
    <input class="checkbox_category" type="checkbox" value="175" >bnmbn</input><br>
    <input class="checkbox_category" type="checkbox" value="176" >bnmbn</input><br>
</div>

---

Edit: You can also insert an item before another item using insertBefore:

$('<input class="checkbox_category" type="checkbox" value="176" >new</input><br>').insertBefore('.categorie>div')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="categorie">
    <input class="checkbox_category" type="checkbox" value="174" >sdfasdf</input><br>
    <input class="checkbox_category" type="checkbox" value="175" >bnmbn</input><br>
    <input class="checkbox_category" type="checkbox" value="176" >bnmbn</input><br>
    <div>test</div>
</div>