Demo节点追加替换

1：节点的追加

节点分主动追加和被动追加

案例主动追加

html代码为

<h2>节点追加(父子)</h2>
		<ul id="shu">
		    <li>刘备</li>
		    <li>张飞</li>
		    <li>关羽</li>
		</ul>
		<ul id="wu">
		    <li>孙权</li>
		    <li>周瑜</li>
		    <li id="gai">黄盖</li>
		</ul>
<input type="button" value="主动追加1" onclick="f1()" />
<input type="button" value="被动追加2" onclick="f2()" />

jQuery 代码为：

 <script>
function f1(){
				//主动追加		
				//新节点追加
				//append() 后置 
				$('#shu').append('<li>赵云</li>')
				//prepend() 前置 
				$('#shu').prepend('<li>马超</li>')
			}
 </script>

被动追加

jQuery代码为

 <script>
			function f2(){
				//被动追加
				//appendTo  后置追加
				//prependTo  前置追加
				$("<li>诸葛亮</li>").appendTo('#shu');
				$("<li>孙尚香</li>").prependTo('#shu');
			}
</script>

2：节点的替换、删除、克隆

案例

html代码为

<h2>节点追加(兄弟)</h2>
		    <ul id="shu">
		        <li>刘备</li>
		        <li>张飞</li>
		        <li id="guan">关羽</li>
		    </ul>
		    <ul id="wu">
		        <li>孙权</li>
		        <li>周瑜</li>
		        <li id="gai">黄盖</li>
		    </ul>
<input type="button" value="替换" onclick="f1()" />
<input type="button" value="删除" onclick="f2()" />
<input type="button" value="克隆" onclick="f3()" />

jQuery代码为

<script>
				function f1(){
					//黄盖---替换--关羽
					//主动替换 replaceAll()
					$('#gai').replaceAll('#guan')
				}
				
				function f2(){
					//remove() 删除节点
					$('#gai').remove()
				}
				function f3(){
					//clone() 克隆
					$('#gai').clone().appendTo('#shu')
				}
</script>