jQuery after() 插入元素，然后再获取它

在本文中，我们将介绍如何使用jQuery的after()方法在网页中插入元素，并且再通过其他方法获取到刚刚插入的元素。

阅读更多：jQuery 教程

插入元素

jQuery的after()方法用于在指定元素的后面插入新的元素。它接受一个参数，可以是HTML标签、文本或已存在的元素，并将其插入到指定元素的后面。

下面是一个简单的示例，我们在一个ID为”container”的div元素后面插入一个h1标签。

<div id="container">
  <p>这是一个容器</p>
</div>

<script>
  (document).ready(function(){("#container").after("<h1>这是一个标题</h1>");
  });
</script>

在上面的代码中，我们通过选择器选择了一个ID为”container”的元素，并使用after()方法在它后面插入了一个h1标签。执行代码后，网页中的结果将变为：

<div id="container">
  <p>这是一个容器</p>
</div>
<h1>这是一个标题</h1>

获取刚插入的元素

一旦我们插入了元素，接下来可能会需要对刚插入的元素进行操作或获取它的属性。为了获取刚插入的元素，我们可以使用与插入相邻的next()方法。

继续上面的示例，我们在插入h1标签之后，可以通过next()方法获取到这个插入的元素，并改变其样式。

<div id="container">
  <p>这是一个容器</p>
</div>

<script>
  (document).ready(function(){("#container").after("<h1>这是一个标题</h1>");
    $("#container").next().css("color", "red");
  });
</script>

在上面的代码中，我们使用next()方法获取到刚插入的h1标签，并使用css()方法改变它的字体颜色为红色。执行代码后，网页中的结果将变为：

<div id="container">
  <p>这是一个容器</p>
</div>
<h1 style="color: red;">这是一个标题</h1>

通过这个示例，我们可以看到在插入元素后如何获取到它，并对其进行进一步的操作。

元素复制

在有些情况下，我们不仅需要插入元素，还需要将插入的元素保存副本。为了复制刚插入的元素，我们可以使用clone()方法。

下面是一个示例，我们插入一个按钮，并将其复制到另一个位置。

<div id="container">
  <p>这是一个容器</p>
</div>

<script>
  (document).ready(function(){
    // 插入按钮("#container").after('<button id="myButton">点击我</button>');

    // 复制按钮到另一个位置
    var clonedButton = ("#myButton").clone();("#container").after(clonedButton);
  });
</script>

在上面的代码中，我们首先使用after()方法插入了一个按钮，并赋予其一个唯一的ID”myButton”。接着，使用clone()方法复制了这个按钮，并将副本插入到了指定元素的后面。执行代码后，网页中的结果将变为：

<div id="container">
  <p>这是一个容器</p>
</div>
<button id="myButton">点击我</button>
<button>点击我</button>

通过这个示例，我们可以看到如何插入元素并将其复制到其他位置。

总结

在本文中，我们介绍了如何使用jQuery的after()方法在网页中插入元素，并通过相邻的next()方法获取到刚插入的元素。我们还学习了如何复制插入的元素并将其插入到其他位置。

使用after()方法和相关方法，我们可以在网页中灵活地插入和操作元素，使网页交互更加丰富。希望本文对你理解和使用jQuery中的after()方法有所帮助。