JQuery:如何在最后一个元素之前附加(提交btn)

Question

我有这样的表格。我正在使用 Jquery 将div 附加到表单(div 包含一个输入文本区域字段(。

我确实附加了它，但它在提交按钮之后。我需要这个就在它之前。

另外，我应该

说我正在使用Django，但这应该不是问题。

我应该使用append还是其他Jquery函数？

我的表格：

<form role="form" class="form-horizontal" method="post" enctype='multipart/form-data'>
                {% csrf_token %}
                <div class="form-group hidden">
                    <p class="col-sm-3 control-label"> Nana ID: </p>
                    <p class="col-sm-3 control-label" value="{{ referencia.nana_id }}" name="nana_id"> {{ referencia.nana_id }} </p>
                </div>
                <div class="form-group">
                    <p class="col-sm-3 control-label"> Nombre: </p>
                    <p class="col-sm-3 control-label"> {{ referencia.nombre_apellido }} </p>
                </div>
                <div class="form-group">
                    <p class="col-sm-3 control-label"> Correo: </p>
                    <p class="col-sm-3 control-label"> {{ referencia.correo }} </p>
                </div>
                <div class="form-group">
                    <p class="col-sm-3 control-label"> Teléfono: </p>
                    <p class="col-sm-3 control-label"> {{ referencia.telefono }} </p>
                </div>
                <div class="form-group">
                    <p class="col-sm-3 control-label"> Dirección: </p>
                    <p class="col-sm-3 control-label"> {{ referencia.direccion }} </p>
                </div>
                <div class="form-group">
                    <label for="estado_referencia" class="col-sm-3 control-label">Estado de referencia</label>
                    <div class="col-sm-3 control-label">
                        <select id="estado_referencia" name="estado_referencia"
                                class="">
                            <option value="0">Pendiente</option>
                            <option value="1">No contesta</option>
                            <option value="2">Bueno</option>
                            <option value="3">Malo</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-sm-5">
                    <div class="button  control-label">
                        <a class=" btn btn-blue" type="submit">Modificar estado</a>
                    </div>
                </div>
            </form>

js 文件：

$('#estado_referencia').change(function () {
    if ($(this).val() == '1' || $(this).val() == '3') {
        if ($('div#comentario-textarea').length == 0) {
            $('form').append('<div id="comentario-textarea" class="form-group">n' +
                '  <label for="comentario" class="col-sm-3 control-label">Comentario:</label>n' +
                '  <textarea class="col-sm-3 control-label" rows="5" id="comentario" name="comentario"></textarea>n' +
                '</div>');
        }
    } else {
        $('div#comentario-textarea').remove();
    }
});

Answer 1

使用 .before(( 方法在所选元素之前插入新元素：

$('form .form-group:last').before('<div id="comentario-textarea" class="form-group">n' +
            '  <label for="comentario" class="col-sm-3 control-label">Comentario:</label>n' +
            '  <textarea class="col-sm-3 control-label" rows="5" id="comentario" name="comentario"></textarea>n' +
            '</div>');