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>

jquery笔记-内部插入节点_第1张图片
实战:
<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>

你可能感兴趣的:(jquery笔记-内部插入节点)