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>