左右移动

下面我们来看一下如何是使用jQuery让页面上的标签左右移动。下面我们主要会用到一种jQuery的方法：appendTo()方法，这个方法主要用来把所有匹配的元素追加到另一个指定的元素集合中。在这里我们要注意一下appendTo()方法和append()方法的区别，前者是把A追加到B中，而后者是把B追加到A中，记住不要把两者搞混。
知道了appendTo()方法的作用后，我们接下来来学习如何使用它，首先我们来看一下HTML的部分，如图：

在分别给好各个标签相应的ID后，我们开始写jQuery部分，首先我们要引入jQuery的Js文件，如下图：

然后我们利用ID获取到ID为b1的input按钮，然后给它创建一个点击事件，再运用appendTo()方法把被:selected选择器匹配到的所有选中的option标签后，再点击ID为b1的input按钮后，之前被点击的option标签会从ID为select1的select标签移动到ID为select2的select标签。如下图所示：

这样我们就可以做到把左边选中的标签移动到右边去了。
接下来我们利用ID获取到ID为b2的input按钮，然后给它创建一个点击事件，再运用appendTo()方法使ID为select1的select标签里的所有option标签，在点击ID为b3的input按钮后，所有的option标签会从ID为select1的select标签全部移动到ID为select2的select标签。如下图所示：

这样我们就可以做到把左边的所有标签移动到右边去了。
接下来我们来编写从右到左部分。从右到左部分和前面的从左到右部分差不多只需要更改相应的ID就可以了，详细如下所示：
首先我们利用ID获取到ID为b3的input按钮，然后给它创建一个点击事件，再运用appendTo()方法把被:selected选择器匹配到的所有选中的option标签后，再点击ID为b3的input按钮后，之前被点击的option标签会从ID为select2的select标签移动到ID为select1的select标签。如下图所示：

这样我们就可以做到把右边选中的标签移动到左边去了。
接下来我们利用ID获取到ID为b4的input按钮，然后给它创建一个点击事件，再运用appendTo()方法使ID为select1的select标签里的所有option标签，在点击ID为b4的input按钮后，所有的option标签会从ID为select2的select标签全部移动到ID为select1的select标签。如下图所示：

所有代码写完后，我们要的效果就可以实现了。