Bài 4: Các hàm tác động vào nội dung của thẻ HTML trong Jquery

Ở bài trước chúng ta đã tìm hiểu về hai hàm tác động vào nội dung của thẻ HTML là html() và text() trong jquery rồi. Nhưng do Jquery hỗ trợ chúng ta rất mạnh về DOM, nên mình sẽ viết thêm bài này để tổng hợp lại các hàm tác động đến nội dung của thẻ HTML trong jquery.

1, Hàm append().

-Hàm append() trong Jquery có tác dụng chèn thêm nội dung vào phía sau của thành phần cần tác động.

Cú Pháp:

$('selector').append(content);

Trong đó: content là nội dung mà các bạn cần thêm.

VD:

$('p').append('Toidicode.com');

Xem Kết Quả

2, Hàm prepend().

-Hàm prepend() trong Jquery có tác dụng chèn thêm nội dung vào đầu của thành phần cần tác động.

Cú Pháp:

$('selector').prepend(content);

Trong đó: content là nội dung mà các bạn cần thêm.

VD:

$('p').prepend('Toidicode.com, ');

Xem Kết Quả

3, Hàm after().

-Hàm after() trong Jquery có tác dụng chèn nội dung vào phía sau của thành phần cần tác động.

Cú Pháp:

$('selector').after(content);

Trong đó: content là nội dung mà các bạn cần thêm.

VD:

$('p').after('
Toidicode.com
');

Xem Kết Quả

4, Hàm before().

-Hàm before() trong Jquery có tác dụng chèn thêm nội dung vào phía trước của thành phần cần tác động.

Cú Pháp:

$('selector').before(content);

Trong đó: content là nội dung mà các bạn cần thêm.

VD:

$('p').before('
Toidicode.com
');

Xem Kết Quả

5, Hàm empty().

-Hàm empty() trong Jquery có tác dụng làm trống nội dung của thành phần cần tác động.

Cú Pháp:

$('selector').empty();

VD:

$('p').empty();

Xem Kết Quả

6, Hàm remove().

-Hàm remove() trong Jquery có tác dụng xóa các thành phần vừa được chọn.

Cú Pháp:

$('selector').remove(argument);

Trong đó:

• Nếu để trống hàm remove() thì là xóa hết các thành phần bên trong thành phần cần chọn.
• Nếu muốn xóa các thành phần cụ thể thì chỉ cần liệt kê các thành phần cần xóa trong hàm remove().

VD: Xóa tất cả các thẻ p.

$('p').remove();

Xem Kết Quả

VD: Xóa tất cả các thẻ p có class là ‘demo‘.

$('p').remove('.demo');

Xem Kết Quả

VD: Xóa tất cả các thẻ p có class là ‘demo‘ hoặc id là ‘des‘.

$('p').remove('.demo, #des');

Xem Kết Quả

7, Lời kết.

-Như vậy, qua bài này nữa là mình đã giới thiệu đến mọi người 8 hàm tác động đến nội dung của thẻ HTML bằng jquery. Mọi người chú ý ôn tập kỹ, bài sau chúng ta sẽ tìm hiểu về hai hàm addClass() và removeClass() trong jquery.