và bạn muốn thêm tên vào div này, nhưng bạn cũng muốn tránh ghi trực tiếp tên đó vào HTML, bạn có thể dễ dàng chèn tên đó vào cuối phần tử bằng Javascript. Nối thêm trong Javascript là một cách để chèn nội dung vào cuối phần tử đã có sẵn. Để chắp thêm trong Javascript, chúng ta sử dụng hàm Jquery append[]
Với hàm append[], chúng ta có thể
- nối thêm nội dung. nội dung này có thể là Chuỗi HTML, phần tử DOM, nút văn bản hoặc đối tượng Jquery
- hoặc chúng ta có thể nối thêm một chức năng. hàm này có thể trả về kiểu chuỗi HTML, phần tử DOM, nút văn bản hoặc đối tượng jQuery
Nhưng đối với bài học này, chúng ta sẽ tập trung vào việc nối thêm nội dung chứ không phải chức năng. Việc thêm nội dung được thực hiện thông qua Jquery với định dạng sau
$[selector].append[content];
[NB. Jquery đơn giản là một thư viện Javascript giúp thực hiện một số tác vụ trong Javascript dễ dàng hơn. Nó giúp chúng tôi làm việc thông qua các tài liệu HTML dễ dàng hơn. Nó cũng giúp thao tác, xử lý sự kiện và hoạt ảnh dễ dàng hơn bằng cách sử dụng API hoạt động trên nhiều trình duyệt. ]
Khi chúng ta sử dụng hàm append[], nội dung mà chúng ta đang thêm vào sẽ được thêm vào cuối phần tử đã tồn tại. Nếu chúng ta muốn thêm nội dung vào đầu phần tử thì chúng ta sử dụng hàm prepend[]. Hàm prepend[] và hàm prependTo[] thực hiện cùng một tác vụ. Điều này giống như chức năng append[] và chức năng appendTo[]. Nhưng chúng khác nhau về mặt cú pháp. Đây là cách
append[] nối tham số bạn đang làm việc vào đối tượng bạn đang làm việc trên e. g
$[Append_To_This].append[The_Content_Given_Here];
trong khi appendTo[] nối thêm đối tượng bạn đang làm việc vào tham số bạn đang làm việc trên e. g
$[The_Content_Given_Here].appendTo[Append_To_This];
Đủ lý thuyết. Tôi chắc chắn rằng bây giờ, chúng ta đã biết rõ chức năng append[] làm gì. Bây giờ hãy xem cách sử dụng nó. Tôi sẽ sử dụng ví dụ trước về việc thêm tên thật vào div. trong chỉ mục của tôi. html, tôi có cái này
Tôi sẽ thêm một tên vào cuối lớp này "tên" Đây là cách nó đơn giản. trong ứng dụng của tôi. js, tôi có cái này
$[".name"].append["Afopefoluwa Ojo"];
Đây là một video hướng dẫn mà tôi đã thực hiện để bạn có thể thấy nó hoạt động và làm theo. Bạn phải thêm thư viện jquery của mình vào hướng dẫn này và thiết lập nó thật tốt và tốt
Tái bút. Điều quan trọng cần lưu ý là bộ chọn có thể là id hoặc lớp, nhưng dù bằng cách nào, định dạng thích hợp là đặt nó trong dấu ngoặc kép e. g.
$[The_Content_Given_Here].appendTo[Append_To_This];
6Tôi đã quên đặt của tôi trong dấu ngoặc kép trong video hướng dẫn và vì vậy tôi đã mất khá nhiều thời gian để nhận ra, cũng như tất cả các lỗi thú vị khác [và sơ suất]. Cười tụt cả mông
Video hướng dẫn của bạn thực sự. Đặt muaDevcenter là một mạng lưới dựa vào cộng đồng gồm các Nhà phát triển và Nhà thiết kế phần mềm đã được xác minh ở Châu Phi
Chúng tôi mang đến cho bạn tất cả những diễn biến mới nhất trong hệ sinh thái nhà phát triển ở Châu Phi, ngay trong hộp thư điện tử của bạn
Sự mô tả. Chèn nội dung, được chỉ định bởi tham số, vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp
đã thêm phiên bản. 1. 0 . nối thêm [ nội dung [, nội dung ] ]
Nội dung
Loại hình. htmlString hoặc Phần tử hoặc Văn bản hoặc Mảng hoặc jQuery
Phần tử DOM, nút văn bản, mảng các phần tử và nút văn bản, chuỗi HTML 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
Nội dung
Loại hình. htmlString hoặc Phần tử hoặc Văn bản hoặc Mảng hoặc jQuery
Một hoặc nhiều phần tử DOM bổ sung, nút văn bản, mảng phần tử và nút văn bản, chuỗi HTML 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êm phiên bản. 1. 4 . nối thêm[ chức năng ]
hàm số
Loại hình. Hàm [Chỉ mục số nguyên, Chuỗi html] => htmlString hoặc Phần tử hoặc Văn bản hoặc jQuery
Một hàm trả về một chuỗi HTML, [các] phần tử DOM, [các] 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. Nhận vị trí chỉ mục của phần tử trong tập hợp và giá trị HTML cũ của phần tử làm đối số. Trong hàm,
$[The_Content_Given_Here].appendTo[Append_To_This];
7 đề cập đến phần tử hiện tại trong tập hợp
Phương thức
0 chèn nội dung được chỉ định làm phần tử con cuối cùng của mỗi phần tử trong bộ sưu tập jQuery [Để chèn nội dung đó làm phần tử con đầu tiên, hãy sử dụng
$[ ".inner" ].append[ "
Test
" ];
1]" ];
$[ ".inner" ].append[ "
Test
Các phương thức
0 và
$[ ".inner" ].append[ "
Test
" ];
3 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. Với
$[ ".inner" ].append[ "
Test
" ];
0, biểu thức bộ chọn trước phương thức là vùng chứa nội dung được chèn vào. Mặt khác, với
$[ ".inner" ].append[ "
Test
" ];
5, nội dung đứng trước phương thức, dưới dạng biểu thức bộ chọn hoặc dưới dạng đánh dấu được tạo nhanh chóng và nó được chèn vào vùng chứa đích
$[ ".inner" ].append[ "
Test
" ];
Hãy xem xét HTML sau
1
2
3
4
5
$[Append_To_This].append[The_Content_Given_Here];
1Bạn có thể tạo nội dung và chèn nó vào nhiều thành phần cùng một lúc
1
$[ ".inner" ].append[ "
Test
" ];
Mỗi phần tử
6 bên trong có nội dung mới này
$[ ".inner" ].append[ "
Test
" ];
1
2
3
4
5
6
7
8
9
10
11
$[Append_To_This].append[The_Content_Given_Here];
4Bạn cũng có thể chọn một thành phần trên trang và chèn nó vào một thành phần khác
1
$[Append_To_This].append[The_Content_Given_Here];
5Nếu một phần tử được chọn theo cách này được chèn vào một vị trí duy nhất ở nơi khác trong DOM, thì phần tử đó sẽ được chuyển vào mục tiêu [không được sao chép]
1
2
3
4
5
$[Append_To_This].append[The_Content_Given_Here];
6Quan trọng. Tuy nhiên, nếu có nhiều hơn một phần tử đích, các bản sao nhân bản của phần tử được chèn sẽ được tạo cho từng mục tiêu ngoại trừ mục tiêu cuối cùng
Đối số bổ sung
Tương tự như các phương thức thêm nội dung khác như
7 và
$[ ".inner" ].append[ "
Test
" ];
8,
$[ ".inner" ].append[ "
Test
" ];
0 cũng hỗ trợ truyền nhiều đối số làm đầu vào. Đầu vào được hỗ trợ bao gồm các phần tử DOM, đối tượng jQuery, chuỗi HTML và mảng các phần tử DOM
$[ ".inner" ].append[ "
Test
" ];
Ví dụ: phần sau sẽ chèn hai
6 mới và một
$[ ".inner" ].append[ "
Test
" ];
6 hiện có làm ba nút con cuối cùng của phần thân
$[ ".inner" ].append[ "
Test
" ];
1
2
3
4
5
$[The_Content_Given_Here].appendTo[Append_To_This];
2Vì
0 có thể chấp nhận bất kỳ số lượng đối số bổ sung nào, nên có thể đạt được kết quả tương tự bằng cách chuyển ba
$[ ".inner" ].append[ "
Test
" ];
6 thành ba đối số riêng biệt, như vậy.
$[ ".inner" ].append[ "
Test
" ];
$[Append_To_This].append[The_Content_Given_Here];
44. Loại và số lượng đối số sẽ phụ thuộc phần lớn vào cách bạn thu thập các phần tử trong mã của mình