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这种大类