您的位置：首页 > Web前端 > JQuery

jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

2016-11-06 16:11 603 查看

本文实例讲述了jQuery插入节点和移动节点的方法。分享给大家供大家参考，具体如下：

1. 插入节点：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<html>

<head>

<meta
http-equiv=

"Content-Type"

content=

"text/html;
charset=utf-8"

/>

<title></title>

<script
src=

"js/jquery-1.10.1.min.js"

type=

"text/javascript"

></script>

<scripttype=

"text/javascript"

//<![CDATA[

$(

function

(){

var

$li_1 = $(

"<li
title='香蕉'>香蕉</li>"

);

//
创建第一个<li>元素

var

$li_2 = $(

"<li
title='雪梨'>雪梨</li>"

);

//
创建第二个<li>元素

var

$li_3 = $(

"<li
title='其它'>其它</li>"

);

//
创建第三个<li>元素

var

$parent = $(

"ul"

);

//
获取<ul>节点，即<li>的父节点

var

$two_li = $(

"ul
li:eq(1)"

);

//
获取<ul>节点中第二个<li>元素节点

$parent.append($li_1);

//
append方法将创建的第一个<li>元素添加到父元素的最后面

$parent.prepend($li_2);

//
prepend方法将创建的第二个<li>元素添加到父元素里的最前面

$li_3.insertAfter($two_li);

//
insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

});

//]]>

</script>

</head>

<body>

<p
title=

"选择你最喜欢的水果."

>你最喜欢的水果是?</p>

<ul>

<li
title=

'苹果'

>苹果</li>

<li
title=

'橘子'

>橘子</li>

<li
title=

'菠萝'

>菠萝</li>

</ul>

</body>

</html>

效果图：

2. 移动节点：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<html>

<head>

<meta
http-equiv=

"Content-Type"

content=

"text/html;
charset=utf-8"

/>

<title></title>

<script
src=

"js/jquery-1.10.1.min.js"

type=

"text/javascript"

></script>

<scripttype=

"text/javascript"

//<![CDATA[

$(

function

(){

var

$one_li = $(

"ul
li:eq(1)"

);

//
获取<ul>节点中第二个<li>元素节点

var

$two_li = $(

"ul
li:eq(2)"

);

//
获取<ul>节点中第三个<li>元素节点

$two_li.insertBefore($one_li);

//
移动节点

});

//]]>

</script>

</head>

<body>

<p
title=

"选择你最喜欢的水果."

>你最喜欢的水果是?</p>

<ul>

<li
title=

'苹果'

>苹果</li>

<li
title=

'橘子'

>橘子</li>

<li
title=

'菠萝'

>菠萝</li>

</ul>

</body>

</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航