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

此处使用.appenTo之后，为什么原来的li都没有了？

<script type="text/javascript">
    $("button:last").click(function() {
         //把html结构'<p>新的p元素</p>'
         //加入到li的合集中，为了能够在页面上显示
         //需要再重新appendTo到指定的节点处
         //值得注意：整个结构位置都改变了
         $('li').add('<p>新的p元素</p>').appendTo($('.right'))
    })
    </script>

执行上面的语句之后，原本的$('li')是被移到$('.right')里面了吗？原本的li都没有了，appendTo方法是移动，而非添加？

JohnieXu

2017-03-18

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

关注问题我要回答

1082

操作

收起

4 回答

SteveGBL4220115
2017-09-17

那不知道你没有发现，先运行第一个按钮和先运行第二个按钮结果不同呢？
1.在这里如果先运行第一个按钮的话，会把原有的新的p元素加入到<li>合集中，这里加入到合集意思是使p和li能共享css，add之后会返回一个jq对象，这个对象包括li和p，所以先运行第一个按钮的话，背景都会变成红色。
2.先运行第二个按钮的话，会动态创建一个p元素，并且add后返回一个jq对象，该对象包括li和p。因为新创建的p并没有加入到html中来，所以并不会显示，所以appendTo后，会把jq对象加入到.right中来，所以就会出现所有的元素都不在原来的绿框中了

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

收起回答

夜莺z
2017-04-02

但是我试过了

$('li').appendTo($('.right'))

如果只有一个类名为right的元素，移动li

如果有多个类名为right的元素，也是移动li

都是移动，没有复制，可能是因为jq版本的原因

新版本的应该都是移动

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

收起回答

夜莺z
2017-04-02

appendTo()语法：
appendTo(target)
把包装集里所有元素移动到指定目标的内容的末尾
参数
target (字符串|元素)一个包含jquery选择器的字符串，或一个DOM元素。包装集各元素将追加到target所指定的那个位置。如果多个元素与一个选择器字符串匹配，则包装集各元素将被复制并追加到与选择器匹配的每个元素。

如果目的地只标识一个目标元素，则元素被移动；如果目的地标识多个目标元素，则源元素留在原始位置，且被复制到每个目标元素。

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

收起回答