JQuery關於插入元素節點出現的一些細節問題

大家都知道，JQuery插入節點分內部插入、外部插入：

內部插入：如 append(), appendTo()等

外部插入：如 after(), before(), insertBefore(), insertAfter()等

但相信有很多人在使用他們的時候碰到過一些問題，下面是我總結的一些問題：

① append 只能添加某元素一次？

答案：嚴格來說，是，但是更準確的說，應該是"append只能添加某對象一次"：

解釋如下：(爲簡潔，方便閱讀，head body等標籤不展示)

<style type="text/css">
	div{
		width: 200px;
		height: 150px;
		background: blue;
	}
</style>

<script type="text/javascript">
	$(function(){
		var myP = $("<h1>我是h1標題</h1>")；
		$(":input:eq(0)").click(function(){
			$("div:eq(0)").append(myP);
		});
	});
</script>

<div>我是div,我想添加兩個相同的h1標題</div>
<input type="button" name="btn" value="添加">

假如是這樣的代碼，你會發現，不管你點多少次按鈕，div只會添加一次h1節點，具體爲什麼，相信大家猜到了，因爲myP是一個對象，div添加了一次myP對象，便不會再次添加，因此append(myP)只要改成append("<h1>我是h1標題<h1>")，那就可以添加多次了。

除此之外，假如你只將$("div:eq(0)")改成$("div"),而不動其它的，你會發現div可以添加多個myP對象，這是因爲指向了所有的div，而沒有具體指向哪個div的原因，而導致所有的div都可以無限添加myP對象

appendTo同理。

② after(), before()等，添加某“對象”，頁面會在結尾額外多添加一個該“對象”、或者其它一些問題，這點就是有兩個原因，第一是瀏覽器兼容性原因，另一點就是你實在不該犯的：沒有具體指向在哪裏添加，而用了class指向的一個大類！，只要你做到第二點具體指向，那基本所有問題都解決了。

總結：

    添加元素的時候，要注意對象和節點的區別，以及具體指向添加在哪個位置，而不是用class這種大類