jquery笔记-内部插入节点
JQuery中的DOM操作
内部插入节点
append(content);
向每个匹配的元素的内部结尾处追加内容（相当于主动）
$("#company").append($("#rsl"));
/*******************************************/
appendTo(content);
将每个匹配的元素追加到指定的元素中的内部结尾处（相当于被动）
$("#rsl").appendTo("#company");
/*******************************************/
prepend(content);
向每个匹配元素的内部的开始处插入内容
$("company").prepend("#rsl");
prependTo(content)
将每个匹配的元素追加到指定的元素中的内部开始处（相当于被动）
$("#rsl").prepend("#company");
实例：
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
//选中的从左端到右端
$("#add").click( function(){
$("#second").append($("#first option:selected"));
});
//全部从左端移到右端
$("#add_all").click(function(){
$("#second").append($("#first option"));
});
//双击从左端到右端
$("#first").dblclick(function(){
$("#second").append($("#first option:selected"));
});
});
</script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<table>
<tr>
<td>
<select name="first" size="5" multiple="multiple" id="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
<td>
<input name="add" id="add" type="button" value="-->"/>
<input name="add_all" id="add_all" type="button" value="==>"/>
<input name="remove" id="remove" type="button" value="<--"/>
<input name="remove_all" id="remove_all" type="button" value="<=="/>
</td>
<td>
<select name="first" size="5" multiple="multiple" id="second">
<option value="9">
9
</option>
</select>
</td>
</tr>
</table>
</body>
</html>
实战：
<script type="text/javascript">
function dialogAjaxDone(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId){
navTab.reload(json.forwardUrl, {}, json.navTabId);
}
$.pdialog.closeCurrent();
}
}
</script>
<script language="javascript">
$(document).ready(function () {
$("#roleidarr").addClass("required");
$("#roleidarr option").each(function(){
var val = $(this).val();
$("#roleidarr1 option").each(function(){
if($(this).val() == val){
$("#roleidarr1 option[value='"+$(this).val()+"']").remove();
}
});
});
//$("#select_id option[value='3']").remove();
$("#btall").click(function () {
$("#roleidarr option").attr("selected", "selected");
});
$("#btnotall").click(function () {
$("#roleidarr option").removeAttr("selected");
});
$("#left").click(function () {
$("#roleidarr1").append($("#roleidarr option:selected"));
});
$("#right").click(function () {
$("#roleidarr").append($("#roleidarr1 option:selected"));
var i=0;
while(i<$("#roleidarr option").length){
var j=i+1;
while(j<$("#roleidarr option").length){
if($("#roleidarr option")[i].value==$("#roleidarr option")[j].value){
$("#roleidarr option[index="+j+"]").remove();
j++;
}else{
j++;
}
}
i++;
}
});
});
function selectAll (){
$("#roleidarr option").attr("selected", "selected");
}
</script>
<div class="pageContent">
<form action="<%=basePath %>gedit?navTabId=ugroup_table" name="addForm" id="geditForm" method="post" class="pageForm required-validate" onsubmit="return validateCallback(this,dialogAjaxDone);">
<s:hidden name="act" value="%{usergroupid}" />
<s:hidden name="rrid" id="rrid" value="%{roleidarr}" />
<s:hidden name="rname" id="rname" value="%{rolename}" />
<div class="pageFormContent" layoutH="56">
<table class="tab_select">
<tr>
<td>
<label>用户组名：</label>
</td>
<td> </td>
<td><div>
<input name="usergroupname" id="address" type="text" value="${usergroupname}" class="required textInput" maxlength="50" minlength="0" size="20"/>
</div>
</td>
</tr>
<tr >
<td>
<s:select height="200px"
list="roleLists" multiple="true" name="roleidarr1"
key="权限" listKey="roleid"
listValue="rolename" id="roleidarr1" ></s:select>
</td>
<td class="tabbu">
<input name="bt_left" type="button" value="左移" id="left" class="dia_but"/>
<input name="bt_right" type="button" value="右移" id="right" class="dia_but" />
<input name="bt_all" type="button" value="全选" id="btall" class="dia_but" />
<input name="bt_all_no" type="button" value="全不选" id="btnotall" class="dia_but"/>
</td>
<td>
<s:select list="roleList" multiple="true" name="roleidarr"
key="权限" listKey="roleid"
listValue="rolename" id="roleidarr"></s:select>
</td>
</tr>
</table>
</div>
<div class="formBar">
<ul>
<!--<li><a class="buttonActive" href="javascript:;"><span>保存</span></a></li>-->
<li><div class="buttonActive"><div class="buttonContent"><button type="submit" onclick="selectAll()">保存</button></div></div></li>
<li>
<div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div>
</li>
</ul>
</div>
</form>
</div>