jQuery插入节点的方法

最新推荐文章于 2025-04-28 12:49:52 发布

iteye_17385

最新推荐文章于 2025-04-28 12:49:52 发布

阅读量622

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 创建节点 append ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_17385/article/details/82671692

好多时候我们都要在一些地方插入必要的节点，在jQuery中有如下几种方法，现在来介绍一下他们的用法和区别。

1、内部追加类

append():向[color=red]单个[/color]匹配的元素内部追加内容

例如：html：我爱吃：
jQuery：$('p').append("苹果");
结果：我爱吃：苹果

appendTo():将所有匹配的元素追加到指定的元素中，为之上方法的颠倒操作

例如：html：我爱吃：
jQuery：$("苹果").appendTo('p');
结果：我爱吃：苹果

2、内部前置类

prepend():向每个匹配的元素内部前置内容

例如：html：我爱吃：
jQuery：$('p').predend("苹果");
结果：苹果我爱吃：

prependTo():将所有匹配的元素前置到指定的元素中，为之上方法的颠倒操作

例如：html：我爱吃：
jQuery：$("苹果").prependTo('p');
结果：苹果我爱吃：

3、外部追加类

after():在每个匹配的元素之后插入内容

例如：html：我爱吃：
jQuery：$('p').after("苹果");
结果：我爱吃：苹果

insertAfter():将所有匹配的元素插入到指定元素的后面，为之上方法的颠倒操作

例如：html：我爱吃：
jQuery：$("苹果").insertAfter('p');
结果：我爱吃：苹果

4、外部前置类

before():在每个匹配的元素之前插入内容

例如：html：我爱吃：
jQuery：$('p').before("苹果");
结果：苹果我爱吃：

insertBefore(): 将所有匹配的元素插入到指定的元素的前面，为之上方法的颠倒操作

例如：html：我爱吃：
jQuery：$("苹果").insertBefore('p');
结果：苹果我爱吃：

插入节点的方法不仅可以创建节点，还可以对原有的DOM元素进行移动。只是我没有移动过。