javascript - 在特定位置插入 HTML JQuery

Question

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

Answer 1

鉴于所有元素都有一个公共(public)类，您可以使用 eq() 将新内容按索引放置在所需位置。试试这个:

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

Example fiddle

请注意，为 eq() 提供负数意味着您要从匹配集的末尾倒数。