📌  相关文章
📜  id 到 id 用于追加 jquery - Javascript (1)

📅  最后修改于: 2023-12-03 15:15:47.117000             🧑  作者: Mango

jQuery - 针对 ID 到 ID 的追加操作

在网页开发中，我们常常会需要动态地添加新的内容到页面中。jQuery 提供了非常方便的 DOM 操作功能，使得我们可以很容易地对页面进行修改。本文将介绍如何使用 jQuery 实现从一个 ID 到另一个 ID 的追加操作。

1. HTML 结构

我们需要先定义好 HTML 结构，在其中设置好两个不同的 ID，作为我们要进行追加操作的起始点和终止点：

<div id="start">起始点</div>
<div id="end">终止点</div>

2. jQuery 追加代码

接下来，我们使用 jQuery 进行追加操作。具体来说，我们可以使用 .nextUntil() 方法来选中起始点和终止点之间的所有节点，再通过 .add() 方法将查找到的节点和终止点节点一起添加到所需父节点内。

$(document).ready(function() {
  // 选中起始点到终止点之间的所有节点
  var nodesToAdd = $("#start").nextUntil("#end");
  // 将查找到的节点和终止点节点添加到所需父节点内
  $("#destination").append(nodesToAdd.add("#end"));
});

3. 完整代码

下面是完整的代码，包括 HTML 和 jQuery 部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery 追加操作</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div id="start">起始点</div>
    <div id="middle">中间点 1</div>
    <div>非选中节点 1</div>
    <div id="target">选中节点 1</div>
    <div id="middle">中间点 2</div>
    <div>非选中节点 2</div>
    <div id="target">选中节点 2</div>
    <div id="end">终止点</div>

    <script>
      $(document).ready(function() {
        // 选中起始点到终止点之间的所有节点
        var nodesToAdd = $("#start").nextUntil("#end");
        // 将查找到的节点和终止点节点添加到所需父节点内
        $("#destination").append(nodesToAdd.add("#end"));
      });
    </script>
  </body>
</html>

4. 总结

本文介绍了如何使用 jQuery 实现从一个 ID 到另一个 ID 的追加操作。通过 .nextUntil() 方法选中起始点和终止点之间的所有节点，再通过 .add() 方法将节点添加到指定的父节点内。这样我们就可以非常方便地在网页开发中进行 DOM 操作了。