zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Kali 2020.3安装docker和vulhub
    Web渗透——身份管理测试
    Web渗透——配置管理测试
    网站信息收集
    linux修改MAC的方法
    '文件上传总结'
    美杜莎和九头蛇的对比
    渗透测试常见开放端口及利用
    Google hacking 语法
    web渗透测试基本步骤
  • 原文地址:https://www.cnblogs.com/wangchongzhangdan/p/9409620.html
Copyright © 2011-2022 走看看