admin 管理员组

文章数量: 1086019

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
Share Improve this question asked Jan 26, 2015 at 9:08 NoneNone 5,68023 gold badges93 silver badges178 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 5

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')); })

本文标签： javascriptInsert HTML at specific position JQueryStack Overflow

版权声明：本文标题：javascript - Insert HTML at specific position JQuery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744027264a2520851.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。