.clone()

Định nghĩa và sử dụng

  • .clone(): Tạo một bản sao (copy) cho thành phần.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.clone()

$('p').clone();
  • Đã được thêm vào từ phiên bản 1.5

.clone(Boolean)

$('p').clone(true);

.clone()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p').clone().appendTo('body');
});
</script>
</head>

<body>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần span đã tạo thêm một bản sao.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p>Thành phần p</p>

<p>Thành phần p</p>
<p>Thành phần p</p>

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('span').clone().appendTo('div');
});
</script>
</head>

<body>
<span>Học Web Chuẩn</span>
<div>Hello </div>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần span đã được tạo thêm một bản sao, và chèn bản sao đó vào thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<span>Học Web Chuẩn</span>
<div>Hello </div>

<span>Học Web Chuẩn</span>
<div>Hello <span>Học Web Chuẩn</span></div>

.clone(Boolean)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('.copy').click(function() {
        $(this).closest('p').clone(true).appendTo('div');
    });
});
</script>
</head>

<body>
<div>
<p>
<input type="text" id="edit" value="">
<input type="button" class="copy" value="Copy">
</p>
</div>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần p đã tạo thêm một bản sao sau khi click button.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery - Click button

<div>
<p>
<input type="text" id="edit" value="">
<input type="button" class="copy" value="Copy">
</p>
</div>

<div>
<p>
<input type="text" id="edit" value="">
<input type="button" class="copy" value="Copy">
</p>
<p>
<input type="text" id="edit" value="">
<input type="button" class="copy" value="Copy">
</p>

</div>

THÔNG BÁO LỖI