Một trong những thế mạnh của jQuery là có thể can thiệp vào cấu trúc DOM (mô hình đối tượng tài liệu) của tài tài liệu HTML. jQuery có thể dễ dàng thêm, bớt, sửa đổi thuộc tính của thành phần HTML, thậm chỉ xóa hoàn toàn các thẻ HTML ra khỏi tài liệu trước khi nó được hiển thị lên trình duyệt.

Trong phần 1, chúng ta sẽ cùng tìm hiều một số phương thức phương thức phổ biến của jQuery để thêm vào nội dung và các thành phần mới vào trong tài liệu HTML

Thêm thành phần mới vào tài liệu HTML

.after(content, [,content])

Phương thức after() cho phép chúng ta thêm vào nội dung, hoặc các thành phần HTML vào ngay  sau phần tử tìm được trong cấu trúc HTML.

Giả sử chúng ta có mã HTML sau

<h1>Thành phần h1</h1>
<div class="inner">
    <p>Thành phần p là con của div</p>
</div>

Thực hiện phương thức .after() với thành phần div.inner như sau:

$('.inner').after('<p>Thành phần p được thêm vào khi sử dụng .after()</p>');

Kết quả thành phần p được thêm vào tài liệu HTML ngay sau thành phần như sau:

<h1>Thành phần h1</div>
<div class="inner">
    <p>Thành phần p là con của div</p>
</div>
<p>Thành phần p được thêm vào khi sử dụng .after()</p>

.before(content, [.content]

Ngược lại với .after(), before() sẽ thêm vào nội dung phía trước phần tử tìm được

$('.inner').before('<p>Thành phần p được thêm vào khi sử dụng .before()</p>');

Kết quả thành phần p được thêm vào tài liệu HTML ngay sau thành phần như sau:

<h1>Thành phần h1</div>
<p>Thành phần p được thêm vào khi sử dụng .after()</p>
<div class="inner">
    <p>Thành phần p là con của div</p>
</div>

.append(content, [,content])

Phương thức .append() sẽ cho phép chúng ta thêm vào nội dung bên trong thành phần tìm được, nhưng sau phần tử con cuối cùng của thành phần đó.

Tiếp tục với ví dụ trên, chúng ta sử dụng phương thức .append() như sau:

$('.inner').append('<p>Thành phần p được thêm vào khi sử dụng .append()</p>');

Kết quả thành phần p được thêm vào bên trong thành phần div.inner ở vị trí sau cùng so với các thành phần con của div.inner

<h1>Thành phần h1</div>
<div class="inner">
    <p>Thành phần p là con của div</p>
    <p>Thành phần p được thêm vào khi sử dụng .append()</p>
</div>

.appendTo(selector)

Tác dụng của .appendTo() tương tự như  append(), chỉ khác về cách thức khai báo.

Xét ví dụ với .append() ta có thể viết lại sử dụng .appendTo() như sau, kết quả thì hoàn toàn giống nhau:

$('<p>Thành phần p được thêm vào khi sử dụng .append()</p>').appendTo('.inner');

Chúng ta nhận thấy rằng, khác với append(), .appendTo() chỉ định nội dung trước khi selector được chọn.

.appendTo() còn có một tác dụng khác là nó có thể di chuyển một thành phần đến một vị trí khác.

Xét đoạn mã sau:

$('h1').appendTo('.inner');

Kết quả:

<div class="inner">
    <p>Thành phần p là con của div</p>
    <h1>Thành phần h1</div>
</div>

Như vậy thành phần h1 được được di chuyển đến vị trí mới div.inner

.prepend(content, [,content])

Giống như append(), Phương thức .prepend() sẽ cho phép chúng ta thêm vào nội dung bên trong thành phần tìm được, nhưng trước các phần tử con của thành phần đó.

$('.inner').prepend('<p>Thành phần p được thêm vào khi sử dụng .prepend()</p>');

Kết quả thành phần p được thêm vào bên trong thành phần div.inner ở vị trí đầu tiên so với các thành phần con của div.inner

<h1>Thành phần h1</div>
<div class="inner">
    <p>Thành phần p được thêm vào khi sử dụng .append()</p>
    <p>Thành phần p là con của div</p>
</div>

.prependTo(selector)

Tác dụng của prependTo() tương tự như appendTo(), chỉ khác là nội dung sẽ được thêm vào trị đầu tiên (index = 0) so với các thành phần con của thành phần tìm được

Ngoài ra chúng ta còn có insertAfter() được sử dụng như appendTo() và insertBefore() được sử dụng như prependTo()

wrap(), unwrap(), wrapAll(), wrapInner() bạn có thể tìm hiểu thêm tại đây

Tagged as: after, append, appendTo, before, insertAfter, insertBefore, jQuery, prepend, prependTo

Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter

Bài liên quan

• Làm việc với CSS trong jQuery
• Sửa đổi cấu trúc HTML trong jQuery (Phần cuối)
• Sửa đổi cấu trúc HTML trong jQuery (Phần 3)
• Sửa đổi cấu trúc HTML trong jQuery (Phần 2)
• Kiểm tra Form với jQuery Validate