復制操作代碼：
<!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你點擊了橘子，生成了一個橘子，但是你點擊新生成的橘子，也會復制；相反里面沒有參數，則點擊新生成的則不具有復制的功能。