JavaScript(17):基于输入框的增删与复制

    示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于输入框的增删与复制</title>
</head>
<body>
    <input type="text" id="te">
    <input type="button" value="添加" id="add">
    <input type="button" value="删除" id="del">
    <input type="button" value="复制" id="copy">

    <ul>
        <li>秋风</li>
        <li>萧瑟</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#add').click(function () {
            var r = $('#te').val();
            var temp = "<li>"+r+"</li>";
            $('ul').prepend(temp);
//            直接追加字符串的方式原来就能添加子标签了呀
//            append是追加为子元素的最后处,而prepend是追加为子元素的最前处
        });

//        删除是通过索引来实现的
        $('#del').click(function () {
            var index = $('#te').val();
            $('ul').children().eq(index).remove();
        });

//      复制也是通过索引来实现的
        $('#copy').click(function () {
            var index = $('#te').val();
            var co = $('ul>li').eq(index).clone();
//            clone(),复制函数
            $('ul').append(co);
        });
    </script>
</body>
</html>
阅读更多
个人分类: JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭