How to auto change position of <li> in Jquery

Question

I have an item list in html.

<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>

</ul>

I want a jquery to to auto move <li> positon like that

<ul>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="1">1</li>
</ul>

--->

<ul>
<li id="3">3</li>
<li id="4">4</li>
<li id="1">1</li>
<li id="2">2</li>
</ul>

It will auto change first <li> to the last <li>

I tried, but it is not worked :(

var first = $("ul li:first");
var last = $("ul li:last");

Tks for help

Answer 1

you need to use appendTo('ul')

jsfiddle example

Answer 2

The appendTo() method inserts HTML elements at the end of the selected elements.

so you must use this

$('li:first').appendTo('ul');

Answer 3

Fiddle

var cont = document.getElementById('container');
cont.appendChild(cont.firstChild);

The beauty of vanilla js.