插入元素：
<script>
/*
* 需求：
* 1、在start 后面追加一个蓝色文本 end
* 2、在start 前面添加一个绿色文本 hehe
*
* 总结：
* 1、A.append(B) == B.appendTo(A)
* 效果：在A的最后添加B
* 2、A.prepend(B) == B.prependTo(A)
* 效果：在A的最前插入B
*
*/
$(function(){
var d1 = $("#d1");
//为 d1 追加元素
//d1.append("<font color='blue'>end</font>");//d1追加 end
$("<font color='blue'>end</font>").appendTo(d1);//将 end 追加到 d1
//为d1插入元素到最前
//d1.prepend("<font color='green'>hehe</font>");//d1最前插入 hehe
$("<font color='green'>hehe</font>").prependTo(d1);//将hehe插入到d1的最前
});
</script>
案列：
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
/*
* 以左向右的单箭头为例：
* 需求：
* 按钮单击时，左侧被选定的选项可以移动到右侧
*
* 分析：
* 1、按钮添加单击事件
* 2、获取左侧被选定的选项，然后追加右侧下拉列表
*
*
*/
$(function(){
//1、获取按钮 ---- dom4j log4j --- for
var left2rightSimple = $("#leftToRightSimple");
//2、添加事件
left2rightSimple.click(function(){
//左侧被选定的追加到右侧
//$("#rightSelectId").append($("#leftSelectId option:selected"));
//$("#leftSelectId option:selected").appendTo($("#rightSelectId"));
$("#leftSelectId option:selected").clone().appendTo($("#rightSelectId"));
});
//左侧全部右移
var left2right = $("#leftToRight");
left2right.click(function(){
$("#rightSelectId").append($("#leftSelectId option"));
});
var right2leftSimple = $("#rightToLeftSimple");
right2leftSimple.click(function(){
//右侧被选定的移动到左侧
$("#leftSelectId").append($("#rightSelectId option:selected"));
});
var right2left = $("#rightToLeft");
right2left.click(function(){
$("#leftSelectId").append($("#rightSelectId option"));
});
})
</script>
</head>
<body>
<select id="leftSelectId" multiple="multiple" style="width: 100px;height: 200px;">
<option>左1</option>
<option>左2</option>
<option>左3</option>
<option>左4</option>
<option>左5</option>
</select>
<input type="button" value="》" id="leftToRightSimple"/>
<input type="button" value="》》" id="leftToRight" />
<input type="button" value="《" id="rightToLeftSimple" />
<input type="button" value="《《" id="rightToLeft" />
<select id="rightSelectId" multiple="multiple" style="width: 100px;height: 200px;">
<option>右1</option>
<option>右2</option>
<option>右3</option>
<option>右4</option>
<option>右5</option>
</select>
<hr />
</body>