Jquery中的append跟prepend，after和before的区别
答案:2 悬赏:0 手机版
解决时间 2021-04-03 04:03
- 提问者网友：却不属于对方
- 2021-04-02 04:34
Jquery中的append跟prepend，after和before的区别
最佳答案
- 五星知识达人网友：梦中风几里
- 2021-04-02 05:24
实例代码：
元素1
元素2
元素3
①append是插入到所选元素里面子元素的最后面。
如$("ul").append("插入的元素4");结构会变成：
元素1
元素2
元素3
插入的元素4
②prepend是插入到所选元素里面子元素的最前面。
如$("ul").prepend("插入的元素4");结构会变成：
插入的元素4
元素1
元素2
元素3
③after是插入到所选元素的最后面(紧挨着被选元素)。
如$("ul").after("新盒子");结构会变成：
元素1
元素2
元素3
新盒子④before是插入到所选元素的前面(紧挨着被选元素)。
如$("ul").before("新盒子");结构会变成：
新盒子
元素1
元素2
元素3
元素1
元素2
元素3
①append是插入到所选元素里面子元素的最后面。
如$("ul").append("插入的元素4");结构会变成：
元素1
元素2
元素3
插入的元素4
②prepend是插入到所选元素里面子元素的最前面。
如$("ul").prepend("插入的元素4");结构会变成：
插入的元素4
元素1
元素2
元素3
③after是插入到所选元素的最后面(紧挨着被选元素)。
如$("ul").after("新盒子");结构会变成：
元素1
元素2
元素3
新盒子④before是插入到所选元素的前面(紧挨着被选元素)。
如$("ul").before("新盒子");结构会变成：
新盒子
元素1
元素2
元素3
全部回答
- 1楼网友：患得患失的劫
- 2021-04-02 06:53
假设
使用
$('.a').append($('.c'));
则会这样：
使用
$('.a').prepend($('.c'));
则结果这样：
after()和before()
同样的上述代码，使用
$('.a').after($('.c'));
结果：
使用
$('.a').before($('.c'));
结果：
由上可以得出结论：
append() & prepend()实在元素内插入内容（该内容变成该元素的子元素或节点），after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。
//<---you want div c to append in this
b
使用
$('.a').append($('.c'));
则会这样：
//<---you want div c to append in this
b
c
使用
$('.a').prepend($('.c'));
则结果这样：
//<---you want div c to append in this
c
b
after()和before()
同样的上述代码，使用
$('.a').after($('.c'));
结果：
b
c
//<----this will be placed here使用
$('.a').before($('.c'));
结果：
c
//<----this will be placed hereb
由上可以得出结论：
append() & prepend()实在元素内插入内容（该内容变成该元素的子元素或节点），after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息
大家都在看
推荐资讯