Phương thức append() trong JavaScript là gì

Phuong Thuc Append Trong Javascript La Gi



Giả sử bạn muốn tạo một danh sách và thêm một số phần tử. Nó tiêu tốn một lượng lớn thời gian trong trường hợp thực hiện thủ công. Để làm như vậy, JavaScript cung cấp “ nối thêm () ” để lấy một đối tượng làm đối số và sau đó chèn chúng vào cuối danh sách đã xác định. Hơn nữa, bạn cũng có thể nối các phần tử theo cách khác, như trong danh sách hoặc ở dạng đoạn văn.

Bài đăng này đã nêu phương pháp tìm id đối tượng trong một mảng các đối tượng JavaScript.

Phương thức append() trong JavaScript là gì?

Các ' nối thêm () ” phương thức trong JavaScript được sử dụng để chèn các phần tử hoặc đối tượng chuỗi vào cuối phần tử. Đây là một trong những phương pháp hữu ích nhất để thêm phần tử cần thiết vào vị trí đã chỉ định ở cuối phần tử.







Làm cách nào để sử dụng Phương thức append() trong JavaScript?

Để sử dụng hàm append() trong JavaScript, hãy làm theo cú pháp đã nêu dưới đây:



( bộ chọn ) . nối thêm ( nội dung, chức năng ( chỉ mục, html ) )

Đây:



  • bộ chọn ” là phần tử HTML được truy cập.
  • nối thêm () ” phương thức được sử dụng để nối thêm phần tử.
  • nội dung ” là tham số bắt buộc, xác định nội dung dữ liệu sẽ nối thêm.
  • chức năng() ” là một yếu tố tùy chọn.

Ví dụ 1: Nối cùng một phần tử trong đoạn văn

Để nối các thành phần giống nhau trong một đoạn văn, trước tiên, hãy mở trang HTML có liên quan và sử dụng “

” để nhúng dữ liệu vào giữa các thẻ. Hơn nữa, chỉ định một “ nhận dạng ” vào đoạn văn để truy cập nó trong JavaScript:





< id = 'yếu tố' > Chào mừng đến với Linuxhint P >

Tiếp theo, tạo một nút với sự trợ giúp của nút “ ” phần tử và sử dụng phần tử “ lớp học ” thuộc tính để chỉ định một tên cụ thể và nhúng văn bản với phần tử nút để hiển thị trên nút:

< cái nút lớp học = 'btn' > nối phần tử cái nút >

Bây giờ, hãy sử dụng “ ” để thêm mã JavaScript:



< kịch bản >

$ ( tài liệu ) . sẵn sàng ( chức năng ( ) {

$ ( '.btn' ) . nhấp chuột ( chức năng ( ) {

$ ( '#yếu tố' ) . nối thêm ( 'Nối văn bản khi nhấp vào nút' ) ;

} ) ;

} ) ;

kịch bản >

Theo mã đã cho:

  • sẵn sàng() ” được sử dụng để cung cấp một chức năng khi tài liệu được tải trên màn hình thành công. Để làm như vậy, vượt qua “ chức năng() ” phương thức làm tham số.
  • nhấp chuột() ” phương thức gọi khi người dùng nhấp vào phần tử nút HTML. Phương pháp này xác định việc thực hiện nhấp chuột khi người dùng nhấn nút.
  • nối thêm () ” phương thức chèn một tập hợp các đối tượng sau khi thực hiện “ nhấp chuột() ' phương pháp. Vì mục đích đó, hãy chuyển văn bản cần nối thêm.

đầu ra

Ví dụ 2: Nối các phần tử khác nhau trong biểu mẫu danh sách

Bạn có thể nối các phần tử khác nhau dưới dạng danh sách. Để làm như vậy, hãy tạo một trang HTML và nhúng văn bản với sự trợ giúp của “

' nhãn:

< id = 'nối' > JavaScript nối thêm ( ) Chức năng P >

Tạo một nút bằng cách sử dụng “ ” phần tử và sử dụng phần tử “ trong một cái nhấp chuột ” sự kiện xảy ra khi người dùng nhấp vào một phần tử HTML:

< nút onclick = 'fun()' > nối các phần tử cái nút >

Tạo một vùng chứa div và gán id cho vùng chứa đó bằng cách sử dụng “ nhận dạng ' thuộc tính. Tiếp theo, thêm các yếu tố với sự trợ giúp của “

' nhãn:

< id div = 'thêm phần tử' >

< P > Yếu tố 1 P >

< P > Yếu tố 2 P >

div >

Tiếp theo, sử dụng “ ” và thêm đoạn mã sau vào giữa thẻ:

< kịch bản >

var ElementNumber = 3 ;

chức năng chức năng ( ) {

là cha mẹ = tài liệu. getElementById ( 'thêm phần tử' ) ;

là yếu tố mới = '

Phần tử' + yếu tố số + '

'
;

cha mẹ. chènHTML liền kề ( 'trước' , và phần tử ) ;

yếu tố số ++;

}

kịch bản >

Trong mã đã nêu ở trên:

  • Khai báo một biến bằng cách sử dụng “ đã từng là ” từ khóa và gán giá trị cho nó theo sở thích của bạn.
  • Định nghĩa một hàm và khởi tạo một biến khác bên trong hàm đã xác định với một tên cụ thể.
  • Sau đó, gọi “ getElementById() ” Phương thức JavaScript để truy cập phần tử và chuyển giá trị id làm tham số.
  • insertAdjacentHTML() ” được sử dụng để thêm mã HTML vào một vị trí đã chỉ định và thêm phần tử liền kề với nhau.
  • Sử dụng toán tử số gia để tạo số gia trong phần tử:

Bạn đã tìm hiểu về cách sử dụng phương thức append() trong JavaScript với nhiều ví dụ khác nhau.

Phần kết luận

nối thêm () ” là một phương thức JavaScript được sử dụng để chèn phần tử và đối tượng vào cuối phần tử đã xác định. Bạn có thể nối thêm phần tử giống nhau và các phần tử khác nhau ở dạng đoạn văn và danh sách. Cụ thể hơn, nó có thể được kích hoạt bằng một nút bấm. Bài đăng này đã minh họa phương thức append() trong JavaScript.