jquery - 附加的文本字段不会换行

Question

当我单击表单上的添加按钮时，添加的第一个文本字段出现在第一个文本字段旁边，而不是出现在下一行。

$(document).ready(function() {
  $("#add").click(function(e) {
    e.preventDefault()
    $("#phrase").append('<div class="row" id="phrase"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="row" id="phrase">
    <input id="field" class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate">
  </div>
  <button class="btn waves-effect waves-light" type="button" name="action" id="add">
    Add
  </button>
</form>

Answer 1

使用 Prepend 并确保 ID 是唯一的。

$(document).ready(function() {
  $("#add").click(function(e) {
    e.preventDefault()
    $("#phrase").prepend('<div class="row" id="phrase"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form>
  <div class="row" id="phrase">
    <input id="field" class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate">
  </div>
  <button class="btn waves-effect waves-light" type="button" name="action" id="add">
     Add
   </button>
</form>