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/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值