如何使用 jQuery 单击一个段落并添加另一个段落？(1)

📌 相关文章

📜 如何使用 jQuery 单击一个段落并添加另一个段落？(1)

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

如何使用 jQuery 单击一个段落并添加另一个段落？

如果你想要在单击一个段落后添加另一个段落，可以使用 jQuery 来实现。

步骤

以下是实现这个功能的步骤：

引入 jQuery 库。

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

在 HTML 中添加一个段落。

<p id="add-paragraph">单击我添加一个段落</p>

编写 jQuery 代码，在单击段落时添加另一个段落。

$(document).ready(function() {
  $('#add-paragraph').click(function() {
    $('<p>新段落</p>').insertAfter('#add-paragraph');
  });
});

解释

首先必须引入 jQuery 库。

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

然后，在 HTML 中添加一个段落，并给它一个 id 属性，以便在 jQuery 中引用它。
```
单击我添加一个段落
```
接下来，使用 jQuery 函数 $(document).ready() 来确保在页面加载完成后才执行其中的代码。
```
$(document).ready(function() {
  // jQuery 代码
});
```
在 $(document).ready() 函数中，使用 jQuery 函数 $('#add-paragraph').click() 来添加一个单击事件监听器。
```
$(document).ready(function() {
  $('#add-paragraph').click(function() {
    // 处理函数
  });
});
```
在单击事件处理函数中，使用 jQuery 函数 $('新段落').insertAfter('#add-paragraph'); 插入一个新的段落在当前段落后面。
```
$(document).ready(function() {
 $('#add-paragraph').click(function() {
 $('新段落').insertAfter('#add-paragraph');
 });
});
```

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 添加段落示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#add-paragraph').click(function() {
        $('<p>新段落</p>').insertAfter('#add-paragraph');
      });
    });
  </script>
</head>
<body>
  <p id="add-paragraph">单击我添加一个段落</p>
</body>
</html>

以上就是使用 jQuery 单击一个段落并添加另一个段落的完整介绍。