JQuery nối thêm chuỗi dưới dạng HTML

jQuery cung cấp nhiều phương thức khác nhau để thêm các phần tử DOM mới vào tài liệu HTML hiện có. Bạn có thể thêm các phần tử mới này tại các vị trí khác nhau (trước, sau bất kỳ thẻ hiện có nào) dựa trên yêu cầu của bạn

Phương thức chắp thêm () của jQuery

Phương thức append() của jQuery thêm nội dung vào cuối mỗi (các) phần tử đã khớp. Bạn cũng có thể nối thêm nhiều phần tử trong một lệnh gọi hàm

Sau đây là cú pháp của phương thức append()

$(selector).append(content, [content]);

Ở đây tham số nội dung có thể là một chuỗi HTML, một phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp

Tóm tắt

Hãy xem xét nội dung HTML sau

   
jQuery append() Method
   
Hello
   
Goodbye

Bây giờ nếu chúng ta áp dụng phương thức append() như sau

$( ".inner" ).append( "
Zara
" );

Nó sẽ tạo ra kết quả sau

   
jQuery append() Method
   
Hello
   
Zara
   

   
Goodbye
   
Zara
   

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

The jQuery Example




   

      
jQuery append() Method
      
Hello
      
Goodbye
   

   

   
   Add Text

Phương thức appendTo() của jQuery

Phương thức appendTo() của jQuery thực hiện nhiệm vụ tương tự như được thực hiện bởi appendTo(). Sự khác biệt chính là ở cú pháp cụ thể, ở vị trí của nội dung và mục tiêu

Sau đây là cú pháp của phương thức appendTo()

$(content).appendTo(selector);

Ở đây tham số nội dung có thể là một chuỗi HTML, một phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

The jQuery Example




   

      
jQuery appendTo() Method
      
Hello




      
Goodbye
   

   

   
   Add Text

Phương thức sau() của jQuery

Phương thức after() của jQuery thêm nội dung sau (các) phần tử đã khớp. Bạn cũng có thể chèn nhiều phần tử vào một lệnh gọi hàm

Sau đây là cú pháp của phương thức after()

$(selector).after(content, [content]);

Ở đây tham số nội dung có thể là một chuỗi HTML, một phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp

Tóm tắt

Hãy xem xét nội dung HTML sau

________số 8

Bây giờ nếu chúng ta áp dụng phương thức after() như sau

$( ".inner" ).after( "
Zara
" );

Nó sẽ tạo ra kết quả sau

   
jQuery append() Method
   
Hello
   
Goodbye

0

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

   
jQuery append() Method
   
Hello
   
Goodbye

1

Phương thức chèn sau() của jQuery

Phương thức insertafter() của jQuery thêm nội dung sau mỗi (các) phần tử đã khớp. Các phương thức after() và insertAfter() thực hiện cùng một tác vụ. Sự khác biệt chính là ở cú pháp cụ thể, ở vị trí của nội dung và mục tiêu

Sau đây là cú pháp của phương thức after()

   
jQuery append() Method
   
Hello
   
Goodbye

2

Ở đây tham số nội dung có thể là một chuỗi HTML, một phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

   
jQuery append() Method
   
Hello
   
Goodbye

3

Phương thức trả trước () của jQuery

Phương thức prepend() của jQuery thêm nội dung vào đầu mỗi (các) phần tử đã khớp. Bạn cũng có thể thêm nhiều phần tử vào trước một lệnh gọi hàm

Sau đây là cú pháp của phương thức append()

   
jQuery append() Method
   
Hello
   
Goodbye

4

Ở đây tham số nội dung có thể là một chuỗi HTML, một phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp

Tóm tắt

Hãy xem xét nội dung HTML sau

   
jQuery append() Method
   
Hello
   
Goodbye

5

Bây giờ nếu chúng ta áp dụng phương thức prepend() như sau

   
jQuery append() Method
   
Hello
   
Goodbye

6

Nó sẽ tạo ra kết quả sau

   
jQuery append() Method
   
Hello
   
Goodbye

7

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

   
jQuery append() Method
   
Hello
   
Goodbye

8

Phương thức prependTo() của jQuery

Phương thức prependTo() của jQuery thực hiện tác vụ tương tự như được thực hiện bởi prepend(). Sự khác biệt chính là ở cú pháp cụ thể, ở vị trí của nội dung và mục tiêu

Sau đây là cú pháp của phương thức prependTo()

   
jQuery append() Method
   
Hello
   
Goodbye

9

Ở đây tham số nội dung có thể là một chuỗi HTML, một phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

$( ".inner" ).append( "
Zara
" );

0

Phương thức jQuery before()

Phương thức before() của jQuery thêm nội dung trước (các) phần tử đã khớp. Bạn cũng có thể chèn nhiều phần tử vào một lệnh gọi hàm

Sau đây là cú pháp của phương thức before()

$( ".inner" ).append( "
Zara
" );

1

Ở đây tham số nội dung có thể là một chuỗi HTML, một phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp

Tóm tắt

Hãy xem xét nội dung HTML sau

$( ".inner" ).append( "
Zara
" );

2

Bây giờ nếu chúng ta áp dụng phương thức before() như sau

$( ".inner" ).append( "
Zara
" );

3

Nó sẽ tạo ra kết quả sau

$( ".inner" ).append( "
Zara
" );

4

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

$( ".inner" ).append( "
Zara
" );

5

Phương thức chèn jQuery()

Phương thức jQuery insertB Before() thêm nội dung trước (các) phần tử đã khớp. Các phương thức before() và insertB Before() thực hiện cùng một nhiệm vụ. Sự khác biệt chính là ở cú pháp cụ thể, ở vị trí của nội dung và mục tiêu

Sau đây là cú pháp của phương thức after()

$( ".inner" ).append( "
Zara
" );

6

Ở đây tham số nội dung có thể là một chuỗi HTML, một phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

$( ".inner" ).append( "
Zara
" );

7

Tài liệu tham khảo HTML/CSS jQuery

Bạn có thể tham khảo đầy đủ tất cả các Phương thức jQuery để thao tác nội dung CSS và HTML tại trang sau. Tài liệu tham khảo HTML/CSS jQuery