CODEWITHSUNDEEP
jquery
Nate Pet
Nate Pet

Reputation: 46222

Prepend with last added at bottom

I have the following code:

HTML:

   <div class="row" id="dvNumbers" style="margin-bottom:20px; margin-top:10px">
      <div class="col-md-3">
           <a class="btn btn-primary" data-val="1" id="btnNbr">Add Number</a>
      </div>
  </div>

jQuery:

    var w = 0;

    // start
    $('[id*=btnNbr]').on('click', function () {
        w++;
        var str = "";
        str += "<label>" + w + "</label><br\>";            
        $('#dvNumbers').prepend(str);          
    });

The result I am seeing is as such:

enter image description here

I like to have it so that it is as such that the last added number is at the bottom prior to the Add Number button as such:

1

2

3

4

Upvotes: 0

Views: 29

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

If you want to it so the newest number is in the bottom like your example then use .before() or .prev()

var w = 0;

// start
$('[id*=btnNbr]').on('click', function() {
  w++;
  var str = "";
  str += "<label>" + w + "</label><br\>";
  if ($('#dvNumbers').prev("label").length == 0) {
    $('#dvNumbers').before(str);
  } else {
    $('#dvNumbers').prev("label").after(str);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="dvNumbers" style="margin-bottom:20px; margin-top:10px">
  <div class="col-md-3">
    <a class="btn btn-primary" data-val="1" id="btnNbr">Add Number</a>
  </div>
</div>

Upvotes: 1

Related Questions