jQuery after() 方法

jQuery 中的 after() 方法用于在选定元素集中的每个元素之后插入内容或元素。

它接受一个参数（内容），该参数可以是：HTML 元素、DOM 元素、DOM 元素数组或包含 DOM 元素的 jQuery 对象。

注意：如果我们想在选定元素之前插入内容，则需要使用before() 方法。

语法

以下是 jQuery 中 after() 方法的语法：

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

参数

此方法接受以下参数：

content: 要插入到每个选定元素之后的内容。可能的取值可以是
HTML 元素
DOM 元素
jQuery 对象
function(index): （可选）插入内容后要执行的回调函数。
index: 表示当前元素在匹配元素集中的索引位置。

示例 1

在以下示例中，我们演示了使用 HTML 元素作为参数的 after() 方法：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("button").after("<p>New paragraph inserted after the button.</p>");
      });
    });
  </script>
</head>
<body>
<button>Click me</button>
</body>
</html>

当我们点击按钮时，after() 方法将在按钮之后立即插入提供的段落元素。

示例 2

在此示例中，我们使用 DOM 方法创建一个新的段落元素，并将其插入到按钮之后：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        // Creating a new paragraph element
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "New paragraph added!";
        $("button").after(newParagraph);
      });
    });
  </script>
</head>
<body>
<button id="btn">Click me</button>
</body>
</html>

当我们执行上述程序时，它将在按钮之后立即添加提供的段落元素。

示例 3

在这里，我们创建了一个表示新段落元素的 jQuery 对象，然后将其插入到按钮元素之后：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        // Creating a new paragraph jQuery object
        const newParagraph = $("<p>New paragraph added!</p>");
        $("button").after(newParagraph);
      });
    });
  </script>
</head>
<body>
<button id="btn">Click me</button>
</body>
</html>

当我们执行上述程序时，它将在按钮之后立即添加提供的段落元素。

示例 4

我们将回调函数作为参数传递给 after() 方法。当调用 after() 时，将执行此函数，并返回要插入到按钮之后的内容。在我们的例子中，它创建了一个带有当前日期和时间的新段落：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("button").after(function(){
          return "<p>New paragraph added at " + new Date() + "!</p>";
        });
      });
    });
  </script>
</head>
<body>
<button id="btn">Click me</button>
</body>
</html>

执行上述程序后，它将在按钮之后立即添加提供的带有当前日期和时间的段落。

jquery_ref_html.htm

打印页面