javascript - 如何移动一个元素给另一个

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]);
 }
}

我试图使用该方法将单击的li元素移动到另一个元素，但是当我单击其中一个 li 元素时它没有做任何事情，我该怎么做？还是我做错了什么？先谢谢了ulinsertBefore

标签： javascripthtmljquery

Answer 1

• 将点击处理程序分配给原始 UL 元素 - 否则即使附加到目标 UL (List2)，您的 LI 元素也会交换位置

• 使用Event.target.closest("li")检索 LI 元素

• 最后，使用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>

提示：onclick除非您从内存中创建全新的元素，否则切勿使用。改用更好的附加方法Element.addEventListener()