JQuery操作文档之插入节点

序号

方法

描述

示例

1

append()

向每个匹配元素的内部追加内容

($(A).append(B):在A的后面追加B，也就是将A作为B的最后一个子节点)

HTML：<p>Hello</p>

JQuery代码：$(“p”).append(“<b>Word!<b/>”);

结果：<p>Hello<b>Word!</b></p>

2

appendTo()

将所有匹配的元素追加到指定的元素中。($(A).appendTo(B):将A追加到B中，此时A是B的最后一个子节点)与append()刚好相反

HTML：<p>Hello</p>

JQuery代码：$(“<b>Word!<b/>”).appendTo(“p”);

结果：<p>Hello<b>Word!</b></p>

3

prepend

向每个匹配元素的内部前置内容

($(A). prepend(B):在A的内部前置B，也就是将A作为B的第一个子节点)

HTML：<p>Hello</p>

JQuery代码：$(“p”). prepend (“<b>Word!<b/>”);

结果：<p><b>Word!</b>Hello</p>

4

prependTo()

将所有匹配的元素前置到指定的元素中。($(A). prependTo (B):将A前置到B中，此时A是B的第一个子节点)与prepend ()刚好相反

HTML：<p>Hello</p>

JQuery代码：

$(“<b>Word!<b/>”). prependTo (“p”);

结果：<p><b>Word!</b>Hello</p>

5

after()

在每个匹配元素之后插入内容（$(A).after(B):将A作为兄弟节点追加到B的后面）

HTML：<p>Hello</p>

JQuery代码：$(“p”). after (“<b>Word!<b/>”);

结果：<p>Hello</p><b>Word!</b>

6

insertAfter()

将所有匹配元素插入到指定元素的后面（$(A). insertAfter(B):在B元素后面追加一个兄弟节点A）

HTML：<p>Hello</p>

JQuery代码：

$(“<b>Word!<b/>”). insertAfter(“p”);

结果：<p>Hello</p><b>Word!</b>

7

before

在每个匹配元素之前插入内容（$(A). before (B):将A作为兄弟节点添加到B的前面）

HTML：<p>Hello</p>

JQuery代码：$(“p”). before (“<b>Word!<b/>”);

结果：<b>Word!</b><p>Hello</p>

8

insertBefore

将所有匹配元素插入到指定元素的前面（$(A). insertAfter(B):在B元素前面追加一个兄弟节点A）

HTML：<p>Hello</p>

JQuery代码：

$(“<b>Word!<b/>”). insertBefore (“p”);

结果：<b>Word!</b><p>Hello</p>