jQuery插入节点元素的方法

HTML

<button id="button-append">插入节点元素 - append()函数</button><br>
<button id="button-appendTo">插入节点元素 - appendTo()函数</button><br>
<button id="button-prepend">插入节点元素 - prepend()函数</button><br>
<button id="button-prependTo">插入节点元素 - prependTo()函数</button><br>
<button id="button-after">插入节点元素 - after()函数</button><br>
<button id="button-insertAfter">插入节点元素 - insertAfter()函数</button><br>
<button id="button-before">插入节点元素 - before方法</button><br>
<button id="button-insertBefore">插入节点元素 - insertBefore()函数</button><br>
<p>您好！您最喜欢的IT公司是：</p>
<ul>
	<li title="Google">Google</li>
	<li title="Apple">Apple</li>
	<li title="Microsoft">Microsoft</li>
</ul>
					    

JS

$(document).ready(function(){
	$("button#button-append").click(function(){
		$("p").append("<b>插入节点元素</b>");			//向<p>元素中追加<b>元素
	});
	$("button#button-appendTo").click(function(){
		$("<b>追加节点元素</b>").appendTo("p");			//将<b>元素追加到<p>元素中
	});
	$("button#button-prepend").click(function(){
		$("p").prepend("<b>前置节点元素</b>");			//向<p>元素中前置<b>元素
	});
	$("button#button-prependTo").click(function(){
		$("<b>前置到节点元素</b>").prependTo("p");		//将<b>元素前置到<p>元素中
	});
	$("button#button-after").click(function(){
		$("p").after("<b>节点元素后插入节点元素</b>");		//向<p>元素元素后插入<b>元素
	});
	$("button#button-insertAfter").click(function(){
		$("<b>插入到节点元素后</b>").insertAfter("p");	//将<b>元素插入到<p>元素后边
	});
	$("button#button-before").click(function(){
		$("p").before("<b>节点元素前插入节点元素</b>");		//在<p>元素之前添加<b>元素
	});
	$("button#button-insertBefore").click(function(){
		$("<b>插入到节点元素前</b>").insertBefore("p");	//将<b>元素插入到<p>元素前面
	});

    //几种删除节点的方法 
    //var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点 
    //$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去 
    //$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除 
    //$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容 

    //复制节点 
   /* $("ul li").click(function(){ 
     $(this).clone(true).appendTo("ul");//复制当前点击的节点，并将它追加到《ul》元素中，当添加参数时复制它的事件
    }); 
    */ 
    //替换节点 
   //$("p").replaceWith("<strong>你最不喜欢的水果是？</Strong>"); 
   //$("[name='rp']").replaceWith("<tr><td>gg</td><td>gg</td><td>gg</td><td>gg</td></tr><tr><td>gg</td><td>gg</td><td>gg</td><td>gg</td></tr>");
});