jQuery中after()方法的使用-CFANZ编程社区

jQuery中after()方法的使用

after()方法是jQuery中非常实用的DOM操作方法，能够方便地在指定元素后插入内容，简化了JavaScript的DOM操作代码。

after()是jQuery中用于在被选元素后面插入内容的方法。下面详细介绍其用法和示例。

方法定义

after()方法在被选元素后插入指定的内容。

语法

$(selector).after(content)

参数说明

content：必需，规定要插入的内容。可以是以下几种形式：

HTML字符串（如"<b>Hello</b>"）
DOM元素（如$("#foo")[0]）
jQuery对象（如$("b")）
函数（返回HTML字符串）

使用方法

插入HTML字符串

<p>I would like to say: </p>

$("p").after("<b>Hello</b>");

结果：

<p>I would like to say: </p><b>Hello</b>

插入DOM元素

<b id="foo">Hello</b>
<p>I would like to say: </p>

$("p").after($("#foo")[0]);

结果：

<p>I would like to say: </p><b id="foo">Hello</b>

插入jQuery对象

<b>Hello</b>
<p>I would like to say: </p>

$("p").after($("b"));

结果：

<p>I would like to say: </p><b>Hello</b>

使用函数动态插入内容

$("p").after(function() {
  return "<b>Hello " + $(this).index() + "</b>";
});

与insertAfter()的区别

after()方法是将内容插入到被选元素之后
insertAfter()方法是将选中的元素插入到指定元素之后

例如：

// after()方法
$("<span>Inserted</span>").after("p");

// insertAfter()方法
$("<span>Inserted</span>").insertAfter("p");

注意事项

after()方法会将内容插入到每个匹配元素之后
如果content参数是多个元素，那么插入的内容将分别插入到每个目标元素后面
使用函数时，函数中的this指向当前被选元素

实际应用

<!DOCTYPE html>
<html>
<head>
  <title>jQuery after()示例</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").after("<div class='newDiv'>新添加的内容</div>");
      });
    });
  </script>
</head>
<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <button>点击添加内容</button>
</body>
</html>

0 条评论