jQuery | after() 与示例(1)

📌 相关文章

📜 jQuery | after() 与示例(1)

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

jQuery | after() 与示例

在jQuery中，after()方法可以在被选元素之后插入HTML内容、jQuery对象以及DOM元素。

语法

$(selector).after(content, function(index, html))

selector：必需，规定要插入内容的元素。
content：必需，规定要插入的内容，可以是文本、HTML、jQuery对象或DOM元素。
function(index, html)：可选，用于返回已插入内容的函数，函数返回值会作为新的HTML插入内容。

示例

以下是jQuery after()方法的一些示例：

示例1：插入HTML内容

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h2>插入HTML内容</h2>
  <p>点击按钮插入HTML内容：</p>
  <button id="btn">插入内容</button>
  <div id="result"></div>
  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#result").after("<p><b>Hello World!</b></p>");
      });
    });
  </script>
</body>
</html>

在上面的示例中，当你点击插入内容按钮时，会在id为result的div标签后插入一个包含Hello World！文本的段落。

示例2：插入jQuery对象

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
  .red { color: red; }
  </style>
</head>
<body>
  <h2>插入jQuery对象</h2>
  <button id="btn1">插入红色文本</button>
  <button id="btn2">移除红色文本</button>
  <p>Hello World!</p>
  <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("<span class='red'>Red Text</span>").insertAfter("p");
      });
      $("#btn2").click(function(){
        $(".red").remove();
      });
    });
  </script>
</body>
</html>

在上面的示例中，点击插入红色文本按钮后，会在每个p标签后插入一个红色的span标签，并为其添加一个red类。在您单击MoveRedText按钮时，将删除包含red类的所有元素。

示例3：插入DOM元素

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h2>插入DOM元素</h2>
  <p>Hello World!</p>
  <script>
    $(document).ready(function(){
      var txt1 = "<p>文本1</p>";   
      var txt2 = $("<p></p>").text("文本2");   
      var txt3 = document.createElement("p");
      txt3.innerHTML = "文本3";
      $("p").last().after(txt1, txt2, txt3);
    });
  </script>
</body>
</html>

在此示例中，我们使用三种方式创建了三个段落元素，并将它们插入到最后一个p元素后。

示例4：使用函数返回值进行插入

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .red { color: red; }
    .green { color: green; }
    .blue { color: blue; }
  </style>
</head>
<body>
  <h2>使用函数返回值进行插入</h2>
  <p class="target">Hello World!</p>
  <script>
    $(document).ready(function(){
      $("p.target").after(function(){
        return "<p class='red'>Red</p><p class='green'>Green</p><p class='blue'>Blue</p>";
      });
    });
  </script>
</body>
</html>

在上面的示例中，将在class为target的p元素之后插入三个新的段落标签。函数将返回所有新标签的HTML内容，以便jQuery可以使用它。