如何使用JQuery将<li>从<ul>移动到单独div中的另一个<ul>

使用JQuery将<li>从<ul>移动到单独的<div>中的另一个<ul>可以通过以下步骤实现：

首先，确保在HTML文件中引入了JQuery库，可以通过以下代码在<head>标签中添加引用：

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

在HTML文件中，创建两个<ul>元素和一个目标<div>元素，如下所示：

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

<div id="targetDiv">
  <ul id="targetList"></ul>
</div>

使用JQuery选择器选中要移动的<li>元素，并使用appendTo()方法将其添加到目标<ul>中，如下所示：

$(document).ready(function() {
  // 将<li>从<sourceList>移动到<targetList>
  $("#sourceList li").appendTo("#targetList");
});

完整的示例代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Move <li> using JQuery</title>
  <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <ul id="sourceList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <div id="targetDiv">
    <ul id="targetList"></ul>
  </div>

  <script>
    $(document).ready(function() {
      // 将<li>从<sourceList>移动到<targetList>
      $("#sourceList li").appendTo("#targetList");
    });
  </script>
</body>
</html>

这样，<li>元素将从源<ul>中移动到目标<ul>中。