博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery文档操作

Posted on   alex_hrg  阅读(112)  评论(0编辑  收藏  举报
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
</head>
<body>
<div>
    <input type="text" id="v">
    <input type="button" id="add" value="添加"/>
    <input type="button" id="del" value="删除"/>
    <input type="button" id="clone" value="复制"/>
</div>
<ul id="u1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script type="application/javascript">
    $('#add').click(function () {
        var v = $('#v').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').append(temp);    //内部尾部追加
//        $('#u1').prepend(temp);  //内部最前面插入
//        $('#u1').after(temp);  //外部后面加
//        $('#u1').before(temp);  //外部前面加
    });
    $('#del').click(function () {
        var v = $('#v').val();
//        $('#u1').children().eq(v-1).empty();  //清空标签内容
        $('#u1').children().eq(v-1).remove();   //删除标签
    });
    $('#clone').click(function () {
        var v = $('#v').val();
        var temp = $('#u1').children().eq(v-1).clone();  //克隆标签
        $('#u1').append(temp);
    });
</script>
 
 
 
</body>
</html>

  

努力加载评论中...
点击右上角即可分享
微信分享提示