如何实现点击添加工作经历按钮新增文本框时，按钮始终位于所有文本框底部

问题根源 #

按钮和动态新增的文本框放在了同一个#field_div容器内，每次通过innerHTML +=追加内容时，新文本框会被添加到容器最末尾，按钮自然就停留在所有新增文本框的上方。

解决方案1：调整HTML结构（更推荐） #

将动态文本框和按钮分开放在不同容器，按钮永远在文本框容器的下方，不会被新增内容影响位置。

修改后HTML代码：

<div class="form-group">
    <h6>Work Experiece</h6>
    <textarea class="form-control" id="form-control-10" rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>
    <!-- 专门存放动态新增的工作经历文本框 -->
    <div class="col-md-4" id="exp_container"></div>
    <!-- 按钮放在文本框容器外，固定在底部 -->
    <div class="col-md-4">
        <input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();">
    </div>
</div>

注：原代码中<p>标签嵌套<h6>不符合HTML规范，此处同步做了修正

修改后JS代码：

function add_field() {
  const total_text = document.getElementsByClassName("form-control").length + 1;
  // 仅往专属的文本框容器追加内容，不改动按钮位置
  document.getElementById("exp_container").innerHTML += `<textarea class='form-control add-exp add-textbox' rows='5' id='form-control-${total_text}'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>`;
}

解决方案2：不改动HTML仅修改JS逻辑 #

如果不想调整现有HTML结构，可以直接修改JS，把新生成的文本框插入到按钮的前方，不会改变按钮的排序：

function add_field() {
  const total_text = document.getElementsByClassName("form-control").length + 1;
  const fieldDiv = document.getElementById("field_div");
  const addBtn = fieldDiv.querySelector(".add-exp");
  // 生成新文本框节点
  const newTextarea = document.createElement("textarea");
  newTextarea.className = "form-control add-exp add-textbox";
  newTextarea.rows = 5;
  newTextarea.id = `form-control-${total_text}`;
  newTextarea.value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.";
  // 将新文本框插入到按钮之前，按钮始终在容器底部
  fieldDiv.insertBefore(newTextarea, addBtn);
}

该方案同时规避了innerHTML +=会重置容器内所有元素事件绑定的问题，稳定性更高

内容的提问来源于stack exchange，提问作者Mark Zaldua