Move li element with javascript

Question

I would like to move a li element after a list of li with the same class, is that possible?

 $("li#anonymous_element_2").insertAfter("li.amscheckout-row:last"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="amscheckout-row"> </li> <li class="amscheckout-row"> </li> <li class="amscheckout-row"> </li> <li class="fields" id="anonymous_element_2"> </li> <li class="amscheckout-row"> </li> <li class="amscheckout-row"> </li> <li class="amscheckout-row"> </li> <li class="amscheckout-row"> </li> 

Answer 1

jQuery has a built in last() function:

 var elementToMove = $('#anonymous_element_2'); var targetPosition = $('.amscheckout-row').last(); elementToMove.insertAfter(targetPosition); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="amscheckout-row">1</li> <li class="amscheckout-row">2</li> <li class="amscheckout-row">3</li> <li class="fields" id="anonymous_element_2">4</li> <li class="amscheckout-row">5</li> <li class="amscheckout-row">6</li> <li class="amscheckout-row">7</li> <li class="amscheckout-row">8</li> 

Answer 2

Yes you can! The method that should fit your requirements is: after . If I understand you want to "move" and, to do that, you have to "remove/add" the element into the list of values. I suggest you to try this code:

var $liToAppend = $('li#anonymous_element_2');
var $lastLi = $('ul li:last'); // I suppose you are using the root tag UL!

// The final solution:
$liToAppend.remove();
$lastLi.after($liToAppend);

With jQuery you can to this in lot of ways:

$('li#anonymous_element_2').remove().appendTo('ul');

Should work too!

Answer 3

Try This

<script>
 $("<li>Hello world!</li>").insertAfter(".amscheckout-row:last")
</script>