My HTMl is like this

    <div class="col-lg-6">
    <div class="form-group">
        my html-1
    </div>
    <div class="form-group">
        my html-2
    </div>
    <div class="form-group">
        my html-3
    </div>
    <div class="form-group">
        my html-4
    </div>
</div>

And I want to insert a new HTML in between my html-4 and my html-3. means the second last position. How can I make this using JQuery?

I have done something like this

    $('#addmore').click(function () {
    var newData = My new HTML, I will get here
    $('.col-lg-6').append(newData);
});

But this insert the new HTML to the last position. I want it to be inserted at the second last position always. Expected output

    <div class="col-lg-6">
    <div class="form-group">
        my html-1
    </div>
    <div class="form-group">
        my html-2
    </div>
    <div class="form-group">
        my html-3
    </div>
    <div class="form-group">
        my html-new one
    </div>
    <div class="form-group">
        my html-4
    </div>
</div>

My HTMl is like this

    <div class="col-lg-6">
    <div class="form-group">
        my html-1
    </div>
    <div class="form-group">
        my html-2
    </div>
    <div class="form-group">
        my html-3
    </div>
    <div class="form-group">
        my html-4
    </div>
</div>

And I want to insert a new HTML in between my html-4 and my html-3. means the second last position. How can I make this using JQuery?

I have done something like this

    $('#addmore').click(function () {
    var newData = My new HTML, I will get here
    $('.col-lg-6').append(newData);
});

But this insert the new HTML to the last position. I want it to be inserted at the second last position always. Expected output

    <div class="col-lg-6">
    <div class="form-group">
        my html-1
    </div>
    <div class="form-group">
        my html-2
    </div>
    <div class="form-group">
        my html-3
    </div>
    <div class="form-group">
        my html-new one
    </div>
    <div class="form-group">
        my html-4
    </div>
</div>

• javascript
• jquery
• html

4 Answers 4

Given that all the elements have a mon class, you could use eq() to place the new content at the required position by index. Try this:

$('#addmore').click(function () {
    var newData = '<div>FOO</div>';
    $('.col-lg-6 .form-group').eq(-1).before(newData);
});

Example fiddle

Note that providing a negative number to eq() means that you want to count backwards from the end of the matched set.

You can use bination of .last() and .prev()

$('#addmore').click(function () {
    var newData = '<div>Whatever</div>';
    $('.col-lg-6').find('.form-group').last().prev().after(newData);
});

Example

You can do like this :

function insertAt(selector,index,newData) {
    if(index ===0) {
     $(selector).prepend(newData);        
     return;
    }
    $(selector+" > div:nth-child(" + index+ ")").after(newData);
}

fiddle: http://jsfiddle/13qu1htp/3/

You can use the below script to add the new div at second last position.

$('#addmore').click(function(){ $('.col-lg-6 > .form-group:nth-child(3)').after($('my html-new one')); })