jQuery insertAfter()方法 - BBSMAP

jQuery insertAfter()方法

Post published:2023年5月12日
Post category:jquery

jQuery的insertAfter()方法用于在指定的元素后面插入一个或多个元素。该方法接受一个参数，该参数可以是一个html字符串、jQuery对象或DOM节点。下面是该方法的完整攻略：

使用语法

$(要插入的内容).insertAfter(指定的元素);

参数解释

要插入的内容：即要插入的数据。可以是一个HTML字符串、jQuery对象或DOM元素。
指定的元素：即要将内容插入到该元素后面的目标元素。可以是DOM元素、jQuery对象或选择器字符串。

示例1

以下代码演示了如何使用insertAfter()方法。我们通过该方法插入一个列表项到指定的元素中：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

  <h1>JavaScript和jQuery教程</h1>

  <ul class="menu">
    <li>HTML</li>
    <li>CSS</li>
  </ul>

  <script>
    $( "<li>JavaScript</li>" ).insertAfter( ".menu li:nth-child(2)" );
  </script>

</body>
</html>

在上面的代码中，我们在ul元素的第二个li元素后面添加了一个JavaScript列表项。它将插入以下位置：

<ul class="menu">
  <li>HTML</li>
  <li>JavaScript</li>
  <li>CSS</li>
</ul>

示例2

下面的代码是一个更实际的示例。它使用了insertAfter()来在点击按钮时向文档中添加表单输入框：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

  <h2>jQuery insertAfter()方法</h2>

  <button id="addInput">添加输入框</button>

  <script>
    $( "#addInput" ).click(function() {
      $( "<input type='text'>" ).insertAfter( "#addInput" );
    });
  </script>

</body>
</html>

点击“添加输入框”按钮时将添加一个新的输入框。由于我们将插入新元素的位置指定为按钮本身，因此新元素总是插入在按钮之后。

Tags: jquery