如何让我的按钮停留在文本框的底部，每次我按下“添加”？

Question

如何在每次按下add experience按钮添加另一个文本框时使按钮停留在文本框底部？

<div class="form-group">
    <p>
        <h6>Work Experiece</h6>
        </p>
        <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=field_div>
    <input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();">
    </div>

function add_field() {
  var total_text = document.getElementsByClassName("form-control");
  total_text = total_text.length + 1;
  document.getElementById("field_div").innerHTML = document.getElementById("field_div").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>";
}

​

​

Answer 1

在现有文本区域上创建新的div部分，并在新的div中添加新的文本区域

以下是解决方案

​

function add_field() {
  var total_text = document.getElementsByClassName("form-control");
  total_text = total_text.length + 1;
  document.getElementById("text_area_section").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>";
}

<div class="form-group">
    <p>
       <h6>Work Experiece</h6>
    </p>
    <div id="text_area_section">
        <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>    
    <div class="col-md-4" id=field_div>
        <input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();"/>
    </div>
</div>

​

注意：-由于CSS不可用，因此不适用于此解决方案。修改CSS以获得完美视图