复制操作代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档处理_复制操作</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> <script> /** * 需求 * 1.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾 * 2.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾，要求复制后的内容也具有复制的能力 */ /** * 方法分析： * 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。 * 2.clone()：元素以及其所有的事件处理并且选中这些克隆的副本 */ $(function(){ //点击li列表项，将当选点击的li内容追加到ul末尾 $("ul li").click(function(){ //$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素 $(this).clone(true).appendTo("ul");//设置参数true后，复制后的内容也具备单击事件 }) }); </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html>
运行结果：
多次点击li之后：
注意：clone()里面参数是否为true影响着复制出来的东西是否具有和原来一样的属性，也就是说如果为true你点击了橘子，生成了一个橘子，但是你点击新生成的橘子，也会复制；相反里面没有参数，则点击新生成的则不具有复制的功能。