.replaceWith() trong jQuery

Định nghĩa và sử dụng .replaceWith() trong jQuery

.replaceWith(): Thay thế từng nội dung và thành phần mới tới thành phần mục tiêu đã chọn.

Cấu trúc .replaceWith() trong jQuery

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

.replaceWith('Thành phần mới')

$('.test').replaceWith('<p>Đây là thành phần thay thế</p>');

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

.replaceWith(function(){})

$('.test').replaceWith(function() {
    return $(this).contents();
});

.replaceWith('Thành phần mới')

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(){
    $('.test').replaceWith('<p>Đây là thành phần thay thế</p>');
});
</script>
</head>

<body>
<div class="test">Thành phần div</div>
<div>Thành phần div</div>
<div>Thành phần div</div>
<div class="test">Thành phần div</div>
</body>
</html>

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

Ta thấy thành phần div có class="test" và nội dung của nó đã được thay thế bằng các thành phần và nội dung khác.

.replaceWith(function(){})

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(){
    $('button').click(function(){
        $('.test').replaceWith(function(i){
            return '<p>Thành phần p thứ ' + i + '</p>';
        });
    })
});
</script>
</head>

<body>
<div class="test">Thành phần div</div>
<div>Thành phần div</div>
<div>Thành phần div</div>
<div class="test">Thành phần div</div>
<button>Button</button>
</body>
</html>

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

Ta thấy thành phần div có class="test" và nội dung của nó đã được thay thế bằng các thành phần và nội dung khác.

Previous Lesson Next Lesson

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·