jQuery 中在元素中添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别

Denis

发布于 2023-04-13 13:52:40

2.5K00

代码可运行

文章被收录于专栏：WordPress果酱WordPress果酱

运行总次数：0

代码可运行

jQuery 在元素中添加插入内容的方法和区别，整理成表格，省的每次都要翻：

jQuery方法	解释
after()	在被选元素之后插入指定内容
insertAfter()	在被选元素之后插入 HTML 标记或已有的元素。如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
append()	在被选元素的结尾（仍然在内部）插入指定内容
appendTo()	在被选元素的结尾（仍然在内部）插入 HTML 标记或已有的元素。
before()	在被选元素之前插入指定内容
insertBefore()	在被选元素之前插入 HTML 标记或已有的元素。如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
prepend()	在被选元素的开头（仍然在内部）插入指定内容
prependTo()	在被选元素的开头（仍然在内部）插入 HTML 标记或已有的元素

千言解释不如一图示意：

具体代码：

<div class="target">
This is the target div to which new elements are associated using jQuery
</div>

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html