Jquery Move Element To Last Child Position

Let's say I have a

that contains some random elements, but there is one element I've created with this unique selector : $('.myUniqueElement'). I want to use .insertAft

Solution 1:

Try

var mydiv = $('my-div-selector');
mydiv.find('.myUniqueElement').appendTo(mydiv)

or simple

$('my-div').append($('.myUniqueElement'))

Solution 2:

There is no need to use .insertAfter. You should also not use .clone as it'll remove any attached data or events, unless you use .clone(true).

Simply use .appendTo to add the target element to the div and it'll get detached from its original position and added as the last child of the div:

$('.myUniqueElement').appendTo('#my-div');

Solution 3:

There is no need to call $ more than once, just move the element to the end of its parent:

var myEl = $('.my-el-selector');
myEl.appendTo(myEl.parent());

Solution 4:

Vikas is right. However, probably this one is an improved version of it since the original element is removed, not its clone....

$elem = $('.myUniqueElement')
    $('div').append($elem.clone());
    $elem.remove();

Solution 5:

In order to use insertAfter(), you must know the element after which you want to move your element to. And as you said you have random elements, and of course you don't know the current last element, so here what you can do.

Clone your element that you want to move and append it to parent element.

The jQuery code looks like this:

$clone_elem = $('.myUniqueElement').clone();
$('.myUniqueElement').remove();
$('div').append($clone_elem);

Checkout this fiddle

Share