Question

我有一个这样的表格。我正在使用Jquery将div附加到表单（div包含输入textarea字段）。

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

另外，我应该说我正在使用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>');

JQuery：如何在最后一个元素之前追加（提交btn）

1 个答案: