JQuery操作文档之插入节点

JQuery提供了八个方法用于在文档不同位置插入节点。这些方法能帮助开发者更灵活地操作文档结构,在前端开发中十分实用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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中,此时AB的最后一个子节点)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中,此时AB的第一个子节点)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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值