【笔记】 jquery学习笔记关于插入节点

youling · 发表于 2016-7-30 21:11

本帖最后由 Cizel 于 2016-7-30 23:03 编辑

一、JQuery中添加节点一共有4组方法，每组方法有2种方式

第一组：before()、insertBefore()

第二组：after()、insertAfter()

第三组：prepend()、prependTo()

第四组：append()、appendTo()

before(): 在指定节点的前面添加要添加的节点
insertBefore(): 把要插入节点插入到指定节点的前面

after (): 在指定节点的后面添加要添加的节点
insertAfter ():  把要插入的节点插入到指定节点的后面

prepend (): 在指定父级里面的最前面添加指定节点
prependTo ():  把指定节点添加到指定父级里面的最前面

append (): 在指定父级里面的最后面添加指定节点
appendTo ():  把指定节点添加到指定父级里面的最后面

18507917901 · 发表于 2016-7-30 21:58

谢谢楼主

吾爱益达 · 发表于 2016-8-4 19:21

感谢楼主无私的分享！

wdye · 发表于 2016-8-7 13:07

没有实例说明

ren88888888 · 发表于 2016-8-8 15:20

感谢分享

youling · 发表于 2016-8-16 00:18

有人说没有实例说明，现在加上：
<body>
<div id="all" class="all">
<div id="first">
第一
</div>
<div style="" id="second">
第二
</div>
</div>

<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
var insertNode = '<div>要插入的节点</div>';
$("#first").before(insertNode); //在first前面插入insertNode
$(insertNode).insertBefore('#first');//将insertNode插入到first前面

$("#second").after(insertNode);//在second后面插入insertNode节点
$(insertNode).insertAfter('#second');//将insertNode插入到second后面

var apendNode = '<div>要添加的节点</div>';
$('#all').prepend(apendNode);//在all的最前面添加子节点apendNode
$(apendNode).prependTo('#all');//将apendNode节点添加到all的最前面

$('#all').append(apendNode);//在all的最后面添加子节点apendNode
$(apendNode).appendTo('#all');//将apendNode节点添加到all的最后面

});

</script>
</body>

小太阳_lxy · 发表于 2016-8-16 15:49

可以！！

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 【笔记】 jquery学习笔记关于插入节点

免费评分

[其他转载] 【笔记】 jquery学习笔记 关于插入节点

免费评分

[其他转载] 【笔记】 jquery学习笔记关于插入节点