如何在HTML中将项目从一个列表移动到另一个列表

<ul id="sourceList">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<ul id="targetList">
  <li>目标列表1</li>
  <li>目标列表2</li>
</ul>

// 获取源列表和目标列表的引用
var sourceList = document.getElementById("sourceList");
var targetList = document.getElementById("targetList");

// 给源列表中的每个项目添加点击事件监听器
var sourceItems = sourceList.getElementsByTagName("li");
for (var i = 0; i < sourceItems.length; i++) {
  sourceItems[i].addEventListener("click", moveItem);
}

// 点击事件处理函数，将项目从源列表移动到目标列表
function moveItem() {
  // 将被点击的项目添加到目标列表
  targetList.appendChild(this);

  // 从源列表中移除被点击的项目
  sourceList.removeChild(this);
}