append 和 appendTo的区别

由于平时做项目时，append方法用的较多，所以就形成了一种定势思维，即，无论什么问题都爱用append方法解决。
然而今天遇到的一个新的需求，恰恰在使用append方法时会耗费大量的时间和精力。
先上传一下结构代码：

<ul>
    <li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]金牛区</span></label></li>
    <li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]S区</span></label></li>
    <li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]B区</span></label></li>
    <li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]C区</span></label></li>
    <li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]D区</span></label></li>
    <li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]E区</span></label></li>
</ul>
<div class="right"> 
    <span id="add"><input type="button" class="btn" value=">"/></span><br />
    <span id="add_all"><input type="button" class="btn" value=">>"/></span> <br />
    <span id="remove"><input type="button" class="btn" value="<"/></span><br />
    <span id="remove_all"><input type="button" class="btn" value="<<"/></span>
</div>
<ul id="select2"></ul>

以下是结构图片

要实现最简单的左右选择切换。
以下是我的脑抽js片段：

$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 input:checked').parent().parent().appendTo('#select2');
 var len = $("input[name='select1']").length;
 //alert(len);
 var con="";
 var arr =[];
 for(var i=0; i<len; i++){
    if($("input[name='select1']").eq(i).is(':checked')){
        var val = $("input[name='select1']").eq(i).val();
        con +="<li><label><input class='select2' type='checkbox' name='select2' value='"+val+"''><span>[0510000]"+val+"</span></label></li>";
        arr.push(i);

    };
 };
 for(var j=arr.length-1; j>=0; j--){
    var e = arr[j];
    $('#select1 li').eq(e).remove();
 };
 $("#select2").append(con);
});

代码是写完了，逻辑也实现了，但总是感觉自己在写的时候非常的费劲，感觉实现一下小的功能耗费了很多的时间。于是就在网上去查询简便方法。
果然不出所料，appendTo方法算是及时解决了我的燃眉之急啊！
以下来说说他们的区别。
append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
语法
$(content).appendTo(selector) 参数 描述 content 必需。规定要插入的内容（可包含 HTML 标签）。 selector 必需。规定把内容追加到哪个元素上。 区别：$(selector).append(content);

既然有了这个方法，接下来的代码就轻松了：

//移到右边
$('#add').click(function() {
    //获取选中的选项，删除并追加给对方
    $('#select1 input:checked').parent().parent().appendTo('#select2')；
});
//移到左边
$('#remove').click(function() {
    $('#select2 checkbox:checked').parent().parent().appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
    //获取全部的选项,删除并追加给对方
    $('#select1 input[type="checkbox"]').parent().parent().appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
    $('#select2 input[type="checkbox"]').parent().parent().appendTo('#select1');
});

看来平时基础知识还是不牢靠啊，得多练习了。