[jQuery] 動態新增_Dynamic add (.append(), .prepend(), .appendTo(), .before(), .after())

.append() 

jQuery用來動態新增元素的方法，其原理為將新的元素加在指定區塊的最後

	//add text after the last child
	$("#clickId").click(function () {
	$("#showId").append('hello');
	});

view raw jqueryappend_1.js hosted with ❤ by GitHub

.prepend()

將新的元素加在指定區塊的最前

	//add text before the last child
	$("#clickId").click(function () {
	$("#showId").prepend('hello');
	});

view raw jqueryappend_2.js hosted with ❤ by GitHub

實作範例：



.before() 及 .after()

同樣是將新元素加入指定區塊的前後，.after()與.append()不同的是 .append()是將元素加入指定區塊內的最後，而.after()則是加入指定區塊外的最後，同理可推得.before() 如下圖所示：

	<!-- .appent() result-->
	<div id="showBlock">
	Input:<input type="text" name="test[]" />
	hello
	</div>
	<!-- .after() result-->
	<div id="showBlock">
	Input:<input type="text" name="test[]" />
	</div>
	hello
	<!-- .prepend() result-->
	<div id="showBlock">
	hello
	Input:<input type="text" name="test[]" />
	</div>
	<!-- .before() result-->
	hello
	<div id="showBlock">
	Input:<input type="text" name="test[]" />
	</div>

view raw jqueryaterresult.html hosted with ❤ by GitHub

實作範例：

.appendTo() 

將A元素的值加入B元素中

實作範例：

參考文件：
[1] http://api.jquery.com/category/manipulation/dom-insertion-inside/