我的HTMl是这样的
<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>
我想在 my html-4
和 my html-3
之间插入一个新的 HTML。表示倒数第二个位置。
我如何使用 JQuery 实现这一点?
我做过这样的事
$('#addmore').click(function () {
var newData = My new HTML, I will get here
$('.col-lg-6').append(newData);
});
但这会将新的 HTML 插入到最后一个位置。我希望它始终插入倒数第二个位置。 预期输出
<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>
最佳答案
鉴于所有元素都有一个公共(public)类,您可以使用 eq()
将新内容按索引放置在所需位置。试试这个:
$('#addmore').click(function () {
var newData = '<div>FOO</div>';
$('.col-lg-6 .form-group').eq(-1).before(newData);
});
请注意,为 eq()
提供负数意味着您要从匹配集的末尾倒数。
关于javascript - 在特定位置插入 HTML JQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28147197/