how to move <li> element from one <ul> to another

Question

<ul id="List">
<li class="li">1</li>
<li class="li">2</li>
</ul>

<ul id="List2"></ul>

const items = document.querySelectorAll(".li");
for(var i = 0; i < items.length; i++){
 items[i].onclick = function(){
 const list = document.getElementById("List2");
 list.insertBefore(items[i], list.childNodes[0]);
 }
}

im trying to move the clicked li element to another ul with the insertBefore method but it doesnt do anything when i click on one of the li elements, how can i do this? or am i doing anything wrong? Thanks in advance :D

Answer 1

Pure JS solution
EDIT: The second solution is the more correct one

You can use append like :

const listone = document.querySelector("#List");
const listwo = document.querySelector("#List2");
var li = listone.querySelectorAll("li");
for (var i = 0; i < li.length; i++) {
  li[i].onclick = function() {    
    listwo.append(this);
  }
}
function MoveLi(el){

}

#List li{
  color:red;
}
#List2 li{
  color:blue;
}

<ul id="List">
  <li>1</li>
  <li>2</li>
</ul>


<ul id="List2"></ul>

---

After some tips in the comments, addEventListener solution:

const listone = document.querySelector("#List");
const listwo = document.querySelector("#List2");
const li = listone.querySelectorAll("li");
function MoveLi(){
  listwo.append(this);
  this.removeEventListener("click", MoveLi);
}
li.forEach( (el) => {
  el.addEventListener("click", MoveLi);
});

#List li{
  color:red;
}
#List2 li{
  color:blue;
}

<ul id="List">
  <li>1</li>
  <li>2</li>
</ul>


<ul id="List2"></ul>

Answer 2

• Assign the click handler to the original UL element - otherwise your LI elements will swap positions even after appended to the target UL (List2)

• Use Event.target.closest("li") to retrieve the LI element

• Finally, use Element.append()

const EL_list = document.querySelector("#List");
const EL_list2 = document.querySelector("#List2");

EL_list.addEventListener("click", (ev) => {
  const EL_LI = ev.target.closest("li");
  EL_list2.append(EL_LI);
});

#List2{background:gold;}

<ul id="List">
  <li class="li">1</li>
  <li class="li">2</li>
</ul>

<ul id="List2"></ul>

Tip: Never use onclick unless you create brand new Elements from in-memory. Use the better additive method Element.addEventListener() instead

Answer 3

As you've tagged jQuery in the question, this can be achieved by using appendTo(). As you've only got 2 ul elements in the DOM the logic is simply to append the clicked li to the ul which is not its parent. Try this:

let $uls = $('#List, #List2');

$('li').on('click', e => {
  let $li = $(e.target);
  $li.appendTo($uls.not($li.closest('ul')));
});

/* Just to make the demo clearer: */
ul { border: 1px solid #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="List">
  <li class="li">1</li>
  <li class="li">2</li>
  <li class="li">3</li>
  <li class="li">4</li>
  <li class="li">5</li>
</ul>

<ul id="List2"></ul>