hi,欢迎访问本站!
当前位置: 首页Web前端正文

jq中复制节点clone方法的介绍与用法

墨初 Web前端 353阅读

Jquery中复制一个元素包括这个元素内的所有子孙元素可以使用 clone() 方法,下面就针对这个方法做个介绍以及方法如何去使用。

JQuery clone() 方法

clone():复制一个指定的元素,包括这个元素所有的子节点,内容以及元素的各种属性等等。

语法:

$(selector).clone();

jq复制指定的元素的方法

例1:利用clone() 方法复制一个元素

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>73so.com-复制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>73so-复制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>
标签:
声明:无特别说明,转载请标明本文来源!