Javascript 在JQuery的特定位置插入HTML

我的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>

    $('#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>

我的html-1
我的html-2
我的html-3
我的新的
我的html-4

鉴于所有元素都有一个公共类，您可以使用

eq（）

将新内容按索引放置在所需位置。试试这个：

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

$（'#添加更多'）。单击（函数（）{
var newData='FOO'；
$（'.col-lg-6.form group'）.eq（-1）.before（newData）；
});

---

请注意，将负数提供给

eq（）

意味着您希望从匹配集的末尾向后计数。

您可以使用和的组合

$（'#添加更多'）。单击（函数（）{
var newData=‘无论什么’；
$（'.col-lg-6'）.find（'.form group'）.last（）.prev（）.after（newData）；
});

---

您可以这样做：

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

---

fiddle:

您可以使用下面的脚本在倒数第二位添加新的div

$（'#addmore'）。单击（函数（）{ $（'.col-lg-6>。表单组：第n个子（3）'）。在（$（'my html new one'））之后； })

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