jQuery：DOM部分之Manipulation 的使用

开始dom元素节点的添加删除等操作部分的函数学习

函数：after(content)

功能：在每个匹配的元素后面添加html内容

返回：jQuery对象

参数：content (<Content>): Content to insert after each target. 

例子：

Inserts some HTML after all paragraphs.



jQuery Code

$("p").after("<b>Hello</b>");

Before

<p>I would like to say: </p>

Result:

<p>I would like to say: </p><b>Hello</b>



Inserts an Element after all paragraphs.



jQuery Code

$("p").after( $("#foo")[0] );

Before

<b id="foo">Hello</b><p>I would like to say: </p>

Result:

<p>I would like to say: </p><b id="foo">Hello</b>



Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.



jQuery Code

$("p").after( $("b") );

Before

<b>Hello</b><p>I would like to say: </p>

Result:

<p>I would like to say: </p><b>Hello</b>

函数：append(content)

功能：在每个匹配元素之内添加content内容

返回：jQuery对象

参数：content (<Content>): Content to append to the target 

例子：

Appends some HTML to all paragraphs.



jQuery Code

$("p").append("<b>Hello</b>");

Before

<p>I would like to say: </p>

Result:

<p>I would like to say: <b>Hello</b></p>



Appends an Element to all paragraphs.



jQuery Code

$("p").append( $("#foo")[0] );

Before

<p>I would like to say: </p><b id="foo">Hello</b>

Result:

<p>I would like to say: <b id="foo">Hello</b></p>



Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.



jQuery Code

$("p").append( $("b") );

Before

<p>I would like to say: </p><b>Hello</b>

Result:

<p>I would like to say: <b>Hello</b></p>

函数：appendTo(content)

功能：和append(content)类似，只不过是将前面匹配的元素添加到后面的元素内

返回：jQuery对象

参数：content (<Content>): Content to append to the selected element to. 

例子：

Appends all paragraphs to the element with the ID "foo"



jQuery Code

$("p").appendTo("#foo");

Before

<p>I would like to say: </p><div id="foo"></div>

Result:

<div id="foo"><p>I would like to say: </p></div>

函数：before(content)

功能：在匹配元素之前添加内容

返回：jQuery对象

参数：content (<Content>): Content to insert before each target. 

例子：

Inserts some HTML before all paragraphs.



jQuery Code

$("p").before("<b>Hello</b>");

Before

<p>I would like to say: </p>

Result:

<b>Hello</b><p>I would like to say: </p>



Inserts an Element before all paragraphs.



jQuery Code

$("p").before( $("#foo")[0] );

Before

<p>I would like to say: </p><b id="foo">Hello</b>

Result:

<b id="foo">Hello</b><p>I would like to say: </p>



Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.



jQuery Code

$("p").before( $("b") );

Before

<p>I would like to say: </p><b>Hello</b>

Result:

<b>Hello</b><p>I would like to say: </p>

函数：clone(deep)

功能：克隆dom元素

返回：jQuery对象

参数：deep (Boolean): (可选的) 是否克隆子节点及其自身

例子：

Clones all b elements (and selects the clones) and prepends them to all paragraphs.



jQuery Code

$("b").clone().prependTo("p");

Before

<b>Hello</b><p>, how are you?</p>

Result:

<b>Hello</b><p><b>Hello</b>, how are you?</p>

函数：empty()

功能：移除匹配元素的子节点

返回：jQuery对象

例子：

jQuery Code

$("p").empty()

Before

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

Result:

[ <p></p>

函数：insertAfter(content)

功能：将匹配元素插入到content插入到之后

返回：jQuery对象

参数：Content to insert the selected element after

例子：

jQuery Code

$("p").insertAfter("#foo");

Before

<p>I would like to say: </p><div id="foo">Hello</div>

Result:

<div id="foo">Hello</div><p>I would like to say: </p>

[code]函数：insertBefore(content) 
功能：将匹配元素插入到content插入到之前 
返回：jQuery对象 
参数：Content to insert the selected element before. 
例子： 
jQuery Code 
$("p").insertBefore("#foo"); 
Before 
<div id="foo">Hello</div><p>I would like to say: </p> 
Result: 
<p>I would like to say: <