选择器 外部插入

after(content|fn)

概述

在每个匹配的元素之后插入内容。

参数

content

插入到每个目标后的内容

function

函数必须返回一个html字符串。

示例

描述:

在所有段落之后插入一些HTML标记代码。

HTML 代码:

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

jQuery 代码:

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

结果:

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

描述:

在所有段落之后插入一个DOM元素。

HTML 代码:

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

jQuery 代码:

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

结果:

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

描述:

在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

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

jQuery 代码:

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

结果:

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

before(content|fn)

概述

在每个匹配的元素之前插入内容。

参数

content

插入到每个目标后的内容

function

函数必须返回一个html字符串。

示例

描述:

在所有段落之前插入一些HTML标记代码。

HTML 代码:

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

jQuery 代码:

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

结果:

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

描述:

在所有段落之前插入一个元素。

HTML 代码:

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

jQuery 代码:

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

结果:

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

描述:

在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

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

jQuery 代码:

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

结果:

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

insertAfter(content)

概述

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数

content

用于匹配元素的jQuery表达式

示例

描述:

把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

HTML 代码:

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

jQuery 代码:

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

结果:

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

insertBefore(content)

概述

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数

content

用于匹配元素的jQuery表达式

示例

描述:

把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

HTML 代码:

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

jQuery 代码:

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

结果:

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

对应内部插入的方法一样。