javascript - How to generate a input tag above a button -

i have input tag , link button. want click in button , generate input tag , other link button delete , click in delete button delete input tag. when click on button generate input tag under button. want generate input tag above button. how can that?

$(document).ready(function() {    var max_fields = 10; //maximum input boxes allowed    var wrapper = $(".input_fields_wrap"); //fields wrapper    var add_button = $(".add_field_button"); //add button id      var x = 1; //initlal text box count    $(add_button).click(function(e) { //on add input button click      e.preventdefault();      if (x < max_fields) { //max input box allowed        x++; //text box increment        $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">remove</a></div>'); //add input box      }    });      $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text      e.preventdefault();      $(this).parent('div').remove();      x--;    })  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="input_fields_wrap">    <button class="add_field_button">add more fields</button>    <div>      <input type="text" name="mytext[]">    </div>  </div>

you can use "prepend" instead of "append" accomplish this. check snippet.

$(document).ready(function () {          var max_fields = 10; //maximum input boxes allowed          var wrapper = $(".input_fields_wrap"); //fields wrapper          var add_button = $(".add_field_button"); //add button id            var x = 1; //initlal text box count             $(add_button).click(function (e) { //on add input button click              e.preventdefault();              if (x < max_fields) { //max input box allowed                  x++; //text box increment                  $(wrapper).prepend('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">remove</a></div>'); //add input box              }          });            $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text              e.preventdefault();              $(this).parent('div').remove();              x--;          })      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="input_fields_wrap">    <button class="add_field_button">add more fields</button>    <div><input type="text" name="mytext[]"></div>  </div>