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

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);

©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,要求很高,有兴趣请联系微信:「chenduopapa」或微信公众号:「WordPress果酱」。

标签: jQuery

热门文章