Cách chèn nội dung vào tài liệu HTML bằng jQuery

Trong bài học trước Taimienphi.vn đã giới thiệu cho bạn về phương thức Getter và Setter trong jQuery, bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách chèn nội dung vào tài liệu HTML bằng jQuery.

cach chen noi dung vao tai lieu html bang jquery

Cách chèn nội dung vào tài liệu HTML bằng jQuery

Để tìm hiểu cách chèn nội dung vào tài liệu HTML bằng jQuery như thế nào, bạn đọc cùng tham khảo tiếp bài học jQuery dưới đây của Taimienphi.vn.

Mục Lục bài viết:
1. Cách chèn nội dung vào tài liệu HTML bằng jQuery
2. Phương thức append() trong jQuery
3. Phương thức prepend() trong jQuery
4. Chèn nhiều phần tử bằng phương thức append() và preend()
5. Phương thức before() trong jQuery
6. Phương thức after() trong jQuery
7. Chèn nhiều phần tử bằng phương thức before() và after() trong jQuery
8. Phương thức wrap() trong jQuery

 

1. Cách chèn nội dung vào tài liệu HTML bằng jQuery

jQuery cung cấp một số phương thức, bao gồm append(), prepend(), html(), text(), before(), after(), wrap(), ... cho phép người dùng chèn nội dung mới bên trong phần tử hiện có.

 

2. Phương thức append() trong jQuery

Phương thức append() trong jQuery được sử dụng để chèn nội dung vào cuối các phần tử được chọn.

Ví dụ: ví dụ dưới đây minh họa các sử dụng phương thức append() trong jQuery để chèn một số nội dung HTML vào các đoạn văn bản trong tài liệu:

cach chen noi dung vao tai lieu html bang jquery

Kết quả đầu ra có dạng như dưới đây:

cach chen noi dung vao tai lieu html bang jquery 2

Lưu ý: Các nội dung hoặc phần tử được chèn bằng phương thức append() và phương thức prepend() trong jQuery sẽ được thêm bên trong các phần tử được chọn.

 

3. Phương thức prepend() trong jQuery

Phương thức prepend() trong jQuery được sử dụng để chèn nội dung vào đầu các phần tử được chọn.

Ví dụ: ví dụ dưới đây minh họa cách chèn nội dung HTML vào các đoạn văn bản trên tài liệu có sẵn bằng phương thức prepend():

cach chen noi dung vao tai lieu html bang jquery 3

Kết quả đầu ra có dạng như dưới đây:

cach chen noi dung vao tai lieu html bang jquery 4

 

4. Chèn nhiều phần tử bằng phương thức append() và preend()

Ngoài ra các phương thức append()preend() trong jQuery cũng cho phép nhiều đối số làm đầu vào.

Ví dụ: trong đoạn mã dưới đây minh họa cách chèn phần tử h1, p và phần tử img bên trong phần tử body:

cach chen noi dung vao tai lieu html bang jquery 5

Kết quả đầu ra có dạng như dưới đây:

cach chen noi dung vao tai lieu html bang jquery 6

 

5. Phương thức before() trong jQuery

Phương thức before() trong jQuery được sử dụng để chèn nội dung trước các phần tử được chọn.

Ví dụ: trong ví dụ dưới đây minh họa các chèn một đoạn văn bản trước phần tử chứa trên tài liệu có sẵn bằng phương thức before() trong jQuery:

cach chen noi dung vao tai lieu html bang jquery 7

Kết quả đầu ra có dạng như dưới đây:

cach chen noi dung vao tai lieu html bang jquery 8

Lưu ý: nội dung hoặc các phần tử được chèn bằng phương thức before()after() trong jQuery được thêm vào bên ngoài các phần tử đã được chọn.

 

6. Phương thức after() trong jQuery

Phương thức after() trong jQuery được sử dụng để chèn nội dung vào sau các phần tử được chọn.

Ví dụ: ví dụ dưới đây minh họa cách chèn đoạn văn bản vào sau phần tử chứa trên tài liệu bằng phương thức after() trong jQuery:

cach chen noi dung vao tai lieu html bang jquery 9

Kết quả đầu ra có dạng như dưới đây:

cach chen noi dung vao tai lieu html bang jquery 10

 

7. Chèn nhiều phần tử bằng phương thức before() và after() trong jQuery

Tương tự, các phương thức before()after() trong jQuery cũng cho phép nhiều đối số làm đầu vào.

Ví dụ: trong ví dụ dưới đây minh họa cách chèn phần tử h1, pimg trước các phần tử p:

cach chen noi dung vao tai lieu html bang jquery 11

Kết quả đầu ra có dạng như dưới đây:

cach chen noi dung vao tai lieu html bang jquery 12

 

8. Phương thức wrap() trong jQuery

Phương thức wrap() trong jQuery được sử dụng để bọc cấu trúc HTML xung quanh các phần tử được chọn.

Ví dụ: đoạn mã jQuery dưới đây minh họa các bọc các phần tử chứa với phần tử div bằng lớp .wrapper trong tài liệu, bọc các nội dung bên trong các phần tử đoạn văn bản bắt đầu bằng phần tử p và phần tử em:

cach chen noi dung vao tai lieu html bang jquery 13

Kết quả đầu ra có dạng như dưới đây:

cach chen noi dung vao tai lieu html bang jquery 14

https://thuthuat.taimienphi.vn/cach-chen-noi-dung-vao-tai-lieu-html-bang-jquery-52288n.aspx
Bài học HTML trên đây Taimienphi.vn vừa hướng dẫn bạn cách chèn nội dung vào tài liệu HTML bằng jQuery. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách xóa các phần tử và thuộc tính trong jQuery.

Tác giả: Quỳnh Búp Bê     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Cách chèn âm thanh, nhạc vào file PDF bằng Foxit Reader
Ẩn hiện các phần tử HTML bằng jQuery
Phương thức stop() trong jQuery
Mã màu trong CSS đầy đủ
Hiệu ứng Fade in và Fade out trong jQuery
Từ khoá liên quan:

Cách chèn nội dung vào tài liệu HTML bằng jQuery

, chèn nội dung vào tài liệu HTML bằng jQuery, jQuery,

SOFT LIÊN QUAN
  • jQuery

    Thiết kế, phát triển website

    jQuery là thư viện JavaScript phổ biến nhất trên thế giới, được sử dụng để thao tác DOM, xử lý sự kiện JS, tạo ảnh động Web và tương tác Ajax. Thư viện cung cấp cho người dùng bộ công cụ mạnh để phát triển Web, hỗ trợ ch ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá