如何用jQuery在表单提交按钮前追加元素？

你遇到的问题是append()方法会把新元素追加到目标容器（这里是<form>）的最后位置，而你的提交按钮div已经是form的最后一个子元素，所以新div自然会出现在它后面。要把新div放在提交按钮的前一位，你需要用能指定插入位置的方法，比如before()或者insertBefore()。

具体修改思路 #

你的提交按钮所在的容器是这个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>

我们只需要选中这个容器，然后把新的textarea容器插入到它的同级前面位置即可。

修改后的JS代码 #

$('#estado_referencia').change(function () { 
  if ($(this).val() == '1' || $(this).val() == '3') { 
    if ($('div#comentario-textarea').length == 0) { 
      // 用before()把新div插入到提交按钮容器的前面
      $('div.form-group.col-sm-5').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>'); 
    } 
  } else { 
    $('div#comentario-textarea').remove(); 
  } 
});

方法说明 #

• $('目标元素').before(新内容)：会把新内容插入到目标元素的同级前面位置，完全符合你要放在提交按钮div前的需求。
• 如果你更习惯链式写法，也可以用insertBefore()，效果完全一致：

  $(`<div id="comentario-textarea" class="form-group">...</div>`).insertBefore('div.form-group.col-sm-5');
  

另外提个小细节：你的提交按钮用的是<a>标签，在表单场景下更推荐用<button type="submit">来触发表单提交，不过这和当前的jQuery问题无关，只是个小建议~

内容的提问来源于stack exchange，提问作者Omar Gonzales