在第三部分(单击此处以获取第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');
如上所述,这些功能从本质上将给我们相同的结果。
![](https://i-blog.csdnimg.cn/blog_migrate/103da83bf55380fff4b55a43dfe61b8f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/103da83bf55380fff4b55a43dfe61b8f.png)
重新定位元素
除了创建新元素,我们还可以使用这些功能在文档中重新定位现有元素。 给定上面相同HTML结构,我们可以用这种方式编写它,例如,使用.after()
函数将.list-1
移动到底部。
$('.list-5').after($('.list-1'););
或使用.insertAfter()
函数,我们可以用这种方式编写它。
$('.list-1').insertAfter('.list-5');
他们将返回相同的结果,如以下屏幕截图所示。
![](https://i-blog.csdnimg.cn/blog_migrate/9753d1741a59701dd9d9d6519efbd489.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/9753d1741a59701dd9d9d6519efbd489.jpeg)
同样的功能也去.before()
和.insertBefore()
最终思想
应使用哪种功能取决于具体情况。 有时我们可能必须使用insertAfter()
,并且有时使用after()
并不是可行的选择。
最后,我们到了jQuery系列的结尾, 创建和插入新元素 。 我们希望这对您有帮助。 感谢您的阅读,敬请关注我们的下一个jQuery会话。
翻译自: https://www.hongkiat.com/blog/jquery-insert-element-part3/