jquery中有一个 clone() 方法,它可以复制元素以及元素的子节点,可以使用它将一个元素复制到多个地方并展示,具体的使用方法可以参考下面的文章。
JQuery clone() 方法
clone():复制一个指定的元素,包括这个元素的子节点,内容以及属性。
语法:
$(selector).clone();
jq复制指定的元素的方法
例1:利用clone() 方法复制一个元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title>飞鸟慕鱼博客-复制DIV元素的内容</title> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> </head> <body> <div id="mochu">我是可以被复制的</div> <button id="but">点击复制</button> <script> $('#but').on('click',function(){ console.log($('#mochu').clone()); }); </script> </body> </html>
例2:jq方法复制元素到指定的元素中
<!doctype html> <html> <head> <meta charset="utf-8"> <title>飞鸟慕鱼博客-复制DIV元素的内容</title> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> </head> <body> <div id="mochu">我是可以被复制的</div> <button id="but">点击复制</button> <div id="to"></div> <script> //将ID为mochu的整个元素包括内容,复制到id为to的元素中去 $('#but').on('click',function(){ $('#to').html($('#mochu').clone()); }); </script> </body> </html>