.replaceWith()

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

.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

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

$('.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="https://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.

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

Trước khi có jQuery	Sau khi có jQuery
<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>	<p>Đây là thành phần thay thế</p> <div>Thành phần div</div> <div>Thành phần div</div> <p>Đây là thành phần thay thế</p>

Ví dụ thêm - Chọn một thành phần sử dụng như thành phần thay thế

Html viết:

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

<body>
<div>
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
</body>
</html>

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

Ta thấy thành phần có class="first" đã thay thế cho thành phần có class="third".

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

Trước khi có jQuery	Sau khi có jQuery
<div class="first">First</div> <div class="second">Second</div> <div class="third">Third</div>	<div class="second">Second</div> <div class="first">First</div>

.replaceWith(function(){})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://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.

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

Trước khi có jQuery	Sau khi có jQuery
<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>	<p>Thành phần p thứ 0</p> <div>Thành phần div</div> <div>Thành phần div</div> <p>Thành phần p thứ 1</p>

.replaceAll()

.resize()