jquery+加入新元素_jQuery How-To：创建和插入新元素（第3部分）

在第三部分（单击此处以获取第1部分和第2部分 ），我们将继续有关使用jQuery创建和插入新元素的讨论。 我们讨论了如何使用jQuery函数before()和after()在指定元素之前或之后插入新元素。

jQuery提供了两个类似的功能。 它们是insertBefore()和insertAfter() ，有时会导致它们的用法有些混乱。 这些函数与before()和after()如何？

有什么不同？

这两个函数before()和insertBefore()或insert()和insertAfter()本质上是相同的。 但是如何执行它们却是相反的。 让我们看下面的示例以了解详细信息。

我们有HTML列表，就像这样。

<ul id="list">
	<li class="list-1">Ut enim ad minim veniam.</li>
	<li class="list-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li class="list-3">Duis aute irure dolor in reprehenderit.</li>
	<li class="list-4">Sunt in culpa qui officia deserunt mollit.</li>
	<li class="list-5">Excepteur sint occaecat cupidatat non proident.</li>
</ul>

使用.after()我们可以用这种方式编写它，以便在第二个列表之后插入一个新的<li>元素。

$('.list-2').after('<li class="new-elem">Hello World! This is the new element.</li>');

上面的代码将首先告诉了jQuery搜索.list-2它会之后插入新的元素。 使用.insertAfter()函数，将执行相反的操作。 我们将首先创建新元素，然后搜索应在其中插入元素的目标容器。

$('<li class="new-elem">Hello World! This is the new element.</li>').insertAfter('.list-2');

如上所述，这些功能从本质上将给我们相同的结果。

重新定位元素

除了创建新元素，我们还可以使用这些功能在文档中重新定位现有元素。 给定上面相同HTML结构，我们可以用这种方式编写它，例如，使用.after()函数将.list-1移动到底部。

$('.list-5').after($('.list-1'););

或使用.insertAfter()函数，我们可以用这种方式编写它。

$('.list-1').insertAfter('.list-5');

他们将返回相同的结果，如以下屏幕截图所示。

同样的功能也去.before()和.insertBefore()

最终思想

应使用哪种功能取决于具体情况。 有时我们可能必须使用insertAfter() ，并且有时使用after()并不是可行的选择。

最后，我们到了jQuery系列的结尾， 创建和插入新元素 。 我们希望这对您有帮助。 感谢您的阅读，敬请关注我们的下一个jQuery会话。

翻译自: https://www.hongkiat.com/blog/jquery-insert-element-part3/