python(html 文档处理添加、删除、复制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />
    <input id="a2" type="button" value="删除" />
    <input id="a3" type="button" value="复制" />
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //添加
        $('#a1').click(function () {
            var v = $('#t1').val();
            //t1为输入框
            var temp = "<li>" + v + "</li>";
            //temp 就是用户输入的值。
            // $('#u1').append(temp); //添加到列表后面
            $('#u1').prepend(temp); //添加到列表前面
            // $('#u1').after(temp) //添加到列表以外后面
            // $('#u1').before(temp) //添加到列表以外前面
        });
        //删除
        $('#a2').click(function () {
            var index = $('#t1').val();
            //index为索引
            $('#u1 li').eq(index).remove();
            //eq是定位index索引中的值。remove是删除。。
            //$('#u1 li').eq(index).empty();
            //empty也是删除，但只是删除内容，列表还是存在
        });
        //复制
        $('#a3').click(function () {
            var index = $('#t1').val();
            //先找到用户内容进行索引。
            var v = $('#u1 li').eq(index).clone();
            //把索引内容进行copy..clone
            $('#u1').append(v);
            //添加到u1中。追加
        })
    </script>
</body>
</html>
相关
