javascript - Changing the order of HTML elements in an array, replacing them in the DOM with the new order -

i have ul called .products , inside of bunch of li's called .product.

each li has data-id on them product's id in database.

i'm building functionality when user clicks "move up" or "move down", product moved or down 1 slot in list.

$('.move-up').click(function(event) {   event.preventdefault();   var shownfieldsarray = $.makearray($('.products'));    var currentindex = $(shownfieldsarray).index($(event.currenttarget).parent());   shownfieldsarray.move(currentindex, (currentindex - 1));   // need reordered shownfieldsarray  }); 

move function (link answer function) on array prototype takes old value , new value , moves things accordingly.

so question is: how should replace value of $('.products') new, re-ordered list user can visual confirmation? should remove items , re-append them or there better replacement of .val()?

since 2 elements want swap adjacent siblings there no need of above. it's easy as:

$('.move-up').click(function(event) {   event.preventdefault();   $(this).after($(this).prev()); }); 

what insert previous sibling (.prev) of clicked item after clicked item (.after). previous sibling element present in dom, clause in documentation relevant:

if element selected way inserted single location elsewhere in dom, moved rather cloned