07.31《jQuery》——3.4克隆节点

需求: 单击任何一个li,复制出这个li,附着在ul后面

重点是clone()方法和append()方法，前者是复制的方法，后者是将元素插入到某元素的子元素后面。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
            }
            
            li {
                width: 152px;
            }
            
            a {
                border: 1px solid #e4393c;
                display: block;
                width: 150px;
                background: #e4393c;
                height: 26px;
                line-height: 26px;
                color: #fff;
                font-size: 15px;
                font-family: '微软雅黑';
                text-align: center;
                text-decoration: none;
                white-space: pre;
            }
            
            ul {
                list-style-type: none;
                padding: 0px;
                margin: 0px;
            }
            
            li a:hover {
                background-color: #F7F7F7;
                color: #e4393c;
                border-right: #F7F7F7;
            }
        </style>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            //需求: 单击任何一个li,复制出这个li,附着在ul后面
            $(function(){
                $("ul>li").click(function(){
                    var $obj = $(this).clone(true);
                    $("ul").append($obj);
                });
            });
        </script>
    </head>

    <body>
        <ul>
            <li>
                <a href="#">手 机</a>
            </li>
            <li>
                <a href="#">笔记本</a>
            </li>
            <li>
                <a href="#">图书音像</a>
            </li>
            <li>
                <a href="#">服装鞋帽</a>
            </li>
        </ul>

    </body>

</html>

07.31《jQuery》——3.4克隆节点

推荐阅读