                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础(二)—DOM篇

append添加位置问题

append添加位置问题为什么点击add传递html结构多次以后新的P元素总是出现在3个list item之上？

CATHY大魔王

2016-08-04

源自：jQuery基础(二)—DOM篇 6-9

关注问题我要回答

1021

操作

收起

4 回答

C0EEC3F7BBAA 回答被采纳 +3 积分
2016-08-04

你第一次点击的时候取出.div里的三个li并加上新的p添加到div.right里，此时.right里有三个li一个p

第二次点的时候你把三个li取出，此时.right里只剩一个p（暂且取名‘次新p’），你再用三个li加一个新p添加到.right中时是添加到次新p的下面，就造成了你所看到的现像，其实最下面的p和三个li才是新添加的，上面的是以前的

6 回复有任何疑惑可以回复我~

收起回答

CATHY大魔王提问者

非常感谢！说的好详细

2016-08-04 回复有任何疑惑可以回复我~

C0EEC3F7BBAA 回复 CATHY大魔王提问者

互相帮助·共同进步

2016-08-04 回复有任何疑惑可以回复我~

Candy3610866

麻烦看一下，图中两个蓝色圈里的内容是我改过的，其他都没变. 然后按照你的说法，最后的结果不是应该像最右侧的蓝色框里那样的吗?怎么就不是呢。。。。。

2016-08-18 回复有任何疑惑可以回复我~

查看1条回复

Airly
2016-10-13

你根据代码顺序来理解$('p').add('新的P元素').appendTo('.right');

---------------------------------------------------------------------------------------

其实是这样的。他先用$('p')取到原始p标签对，然后把（新的P元素）这段代码添加到p标签集合中,也就是$('p').add('新的P元素')

然后把这个新的集合（原来的p+新p）再添加到指定的.right里面,也就是.appendTo('.right');

0 回复有任何疑惑可以回复我~

收起回答

霍丶
2016-09-28

其实你可以先 append 两下然后再点击改变颜色事件然后再继续append 你就会发现下面是上面是红色的而下面试没有颜色的说明是从下面添加的，它只是重复执行了取出 li 然后又放到自己的下面

0 回复有任何疑惑可以回复我~

收起回答

Candy3610866
2016-08-18

为什么结果不是右侧蓝色框里显示的那样？

0 回复有任何疑惑可以回复我~

收起回答

慕仰6432972

因为你在第一次点击以后，之后再点击取的P不就是两个了吗？一个P是原始P一个P是新的P，然后你再点就变成了取一个原始P一个新的P再加上一个新的P，如此往复。如果你把原始P加个class试试，然后选择class而不是P

2016-09-08 回复有任何疑惑可以回复我~

Airly

你根据代码顺序来理解$('p').add('新的P元素').appendTo('.right'); --------------------------------------------------------------------------------------- 其实是这样的。他先用$('p')取到原始p标签对，然后把（新的P元素）这段代码添加到p标签集合中,也就是$('p').add('新的P元素') 然后把这个新的集合（原来的p+新p）再添加到指定的.right里面,也就是.appendTo('.right');

2016-10-13 回复有任何疑惑可以回复我~

0/150

提交

取消

jQuery基础(二)—DOM篇

参与学习 113997 人
解答问题 614 个

jQuery第二阶段开启DOM修炼，了解创建、插入、删除与替换

进入课程

本课相似问答

3 回答append添加位置

1 回答请问大神们append添加不进去怎么搞

2 回答$("p").append(function(n)是单个添加。

3 回答append()问题

5 回答$("body").append(p); 这个append里面的p为什么没有加引号

搜索更多本课相关问答

append添加位置问题

我要回答关注问题

热搜

最近搜索清空

append添加位置问题

4 回答

本课相似问答

append添加位置问题