Thêm phần tử vào bộ chọn hiện tại trong jQuery

Đôi khi có những tình huống chúng ta đã có một bộ chọn, đã thực hiện một số thao tác trên nó và bây giờ muốn thêm vào bộ chọn đó các phần tử khác để thực hiện thêm một số thao tác trên bộ chọn chung này. Việc này được thực hiện bằng phương thức add.

Lấy ví dụ với mã HTML sau:

<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>

Hãy tìm tất cả các đoạn văn, thêm vào 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à chỉ những tiêu đề nằm bên trong phần tử #test, đồng thời đặt màu đỏ cho các tiêu đề và đoạn văn đã chọn:

$('p').append('!').add('#test h2').css('color', 'red');

Tìm tất cả các đoạn văn p có lớp www, đặt văn bản '!' vào đầu chúng, và văn bản '!!' vào cuối, sau đó thêm vào các đoạn văn này cả các tiêu đề h2 và tô màu đỏ cho các đoạn văn và tiêu đề này.