如何移动<li>一个元素<ul>给另一个</ul></li>

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

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>

Answer 2

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 3

• 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, useElement.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