Phương thức add
Phương thức add thêm các phần tử được chỉ định
vào một bộ phần tử đã tồn tại.
Cú pháp
Thêm theo selector:
.add(selector);
Các phần tử được thêm được xác định bởi một hoặc nhiều (mảng) phần tử DOM:
.add(phần tử DOM);
Các phần tử được thêm được xác định bởi một đối tượng jQuery:
.add(đối tượng jQuery);
Các phần tử được thêm được xác định bởi văn bản html:
.add(văn bản html);
Các phần tử được thêm được tìm trên trang với sự trợ giúp của selector được chỉ định, bên trong phạm vi được xác định bởi tham số thứ hai. Phạm vi tìm kiếm có thể được xác định bởi một phần tử DOM, một đối tượng jQuery hoặc một đối tượng tài liệu:
.add(selector, ngữ cảnh);
Ví dụ
Hãy tìm tất cả các đoạn văn, đặt ở cuối chúng
văn bản '!', sau đó thêm vào các đoạn văn đã tìm
các tiêu đề h2
và đồng thời cho cả tiêu đề và đoạn văn
đặt màu đỏ:
<div>ddd</div>
<h1>hhh</h1>
<p>ppp</p>
<div id="test"><h2>hhh</h2></div>
<p>ppp</p>
<h2>hhh</h2>
<p>ppp</p>
$('p').append('!').add('h2').css('color', 'red');
Ví dụ
Hãy đưa vào ngữ cảnh tìm kiếm - chỉ thêm
những h2 nằm bên trong phần tử
#test:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Ví dụ
Tạo ngữ cảnh tìm kiếm dưới dạng phần tử DOM với
sự trợ giúp của phương thức JavaScript
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Ví dụ
Thông thường có thể làm mà không cần ngữ cảnh, chỉ cần tạo một selector phức tạp hơn:
$('p').append('!').add('#test h2').css('color', 'red');
