CODEWITHSUNDEEP
jqueryhtml
Jozsef Naghi
Jozsef Naghi

Reputation: 1095

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

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 ?

Upvotes: 5

Views: 2459

Answers (4)

IUW
IUW

Reputation: 441

Try this one. HTML

<div class ="categorie">
  <input class="checkbox_category" type="checkbox" value="174" />
  <label>Check Box 01</label>
  <br />
  <input class="checkbox_category" type="checkbox" value="175" />
  <label>Check Box 02</label>
  <br />
  <input class="checkbox_category" type="checkbox" value="176" />
  <label>Check Box 03</label>
  <br />
  <div>test div</div>
</div>

<button id="ad" onclick="add()">Add</button>

JS

<script type = "text/javascript">
    function add(){
        var id = "177", category = " Check Box 04",
        input = "<input  class='checkbox_category' value='" + id + "' type='checkbox' />",
        label = "<label>" + category + "</label>",
        br = "<br />",
        html = input + label + br;
        $(".categorie br:last").after(html);
    }
</script>

FYI: <input> tag has no closing tag </input>. Using that will remove from the browser by itself when it gets rendered. If you can check the DOM you can see it. So use a <label> tag to place your text.

Upvotes: 0

Alireza MH
Alireza MH

Reputation: 593

You can also use .appendTo() like below:

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

Upvotes: 1

Jamiec
Jamiec

Reputation: 136074

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>

Upvotes: 8

Milind Anantwar
Milind Anantwar

Reputation: 82231

You should use .next() to target br element along with last input selector and then use .after() instead of .append() to append content after last inputs next br element:

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

Working Demo

Upvotes: 2

Related Questions