需求: 单击任何一个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>