21.1.8_jQuery的append/prepend和after/before的用法

用途

append:在元素内部的最前面追加文本/元素
prepend:在元素内部的末尾处追加文本/元素
after:在元素后面追加/挪动文本/元素
before:在元素前面追加/挪动文本/元素

append/prepend基本用法

1.直接追加文本

$("p").prepend("hello");

页面效果如下:
修改前：

<p></p>

修改后:

<p>hello</p>

2.追加元素

$("div").prepend("<p>hello</p>");

修改前：

<div>
</div>

修改后:

<div>
	<p>hello</p>
</div>

append/prepend特殊用法:更改/挪动元素位置

例:将id为div1的元素挪到id为root的div最后

$("#root").append($("#div1"));

修改前:

<div id="div1">
</div>

<div id="root">
	<div id="div2">
	</div>
	<div id="div3">
	</div>
</div>

修改后:

<div id="root">
	<div id="div2">
	</div>
	<div id="div3">
	</div>
	<div id="div1">
	</div>
</div>

此时就将id为div1的元素挪到id为root的div内部的末尾处了
同时，id为div1的元素的子元素位置也会跟着挪动，如:
修改前:

<div id="div1">
	<p>我是文字</p>
</div>

<div id="root">
	<div id="div2">
	</div>
	<div id="div3">
	</div>
</div>

修改后:

<div id="root">
	<div id="div2">
	</div>
	<div id="div3">
	</div>
	<div id="div1">
		<p>我是文字</p>
	</div>
</div>

after/before用法

和append,prepend类似,只不过元素出现的位置会在某个元素之前/之后，而非append,prepend在某元素内部.

$("div").after("<p>hello</p>");

修改前:

<div>
</div>

修改后:

<div>
</div>
<p>hello</p>