Rate this post

AppendChild() là một phương thức của đối tượng Node trong JavaScript, nó cho phép bạn thêm một thành phần con mới vào cuối các thành phần con của một thành phần cha.

Phương thức này nhận vào một đối tượng Node làm tham số và thêm nó vào cuối của các thành phần con của thành phần cha đang gọi phương thức này.

Các bài viết liên quan:

Ví dụ:

var newNode = document.createElement("LI");

var parentNode = document.getElementById("myList");

parentNode.appendChild(newNode);

Trong ví dụ trên, tôi tạo một thành phần mới là “LI”, sau đó tìm thành phần cha là “myList”, và cuối cùng gọi appendChild với thành phần mới tạo là tham số để thêm vào thành phần cha .

Chú ý là phương thức này sẽ di chuyển thành phần đó từ vị trí cũ nếu nó đã được thêm vào vị trí khác trước đó

Tại sao nên sử dụng appendchild() ?

Có nhiều lý do để bạn sử dụng appendChild() trong JavaScript. Một số lý do chính là:

  1. Tiện lợi: Phương thức này cho phép bạn thêm một thành phần con mới vào cuối các thành phần con của một thành phần cha một cách dễ dàng và tiện lợi, không cần sử dụng các phương thức tìm kiếm hoặc thao tác với mã HTML hoặc DOM.
  2. Hiệu quả: Phương thức này cho phép bạn thêm các thành phần con mới một cách hiệu quả và nhanh chóng, vì nó chỉ thêm vào cuối của các thành phần con, không cần thao tác với các thành phần con khác.
  3. Tương thích: Phương thức này là tương thích với các trình duyệt hiện đại và được hỗ trợ bởi các chuẩn ECMAScript, nên bạn không cần lo lắng về việc sử dụng nó trên các trình duyệt cũ hoặc các thiết bị di động.
  4. Dễ quản lý: Khi sử dụng appendChild(), bạn có thể dễ dàng thêm hoặc xóa các thành phần con mà không làm thay đổi các thành phần của thành phần cha, điều này giúp dễ dàng quản lý và sửa đổi các thành phần trong giao diện người dùng.
  5. Nhẹ tải : Khi sử dụng appendChild(), bạn chỉ cần thêm một thành phần mới vào cuối các thành phần con của thành phần cha, tránh việc phải thay đổi toàn bộ các thành phần con của thành phần cha. Điều này giúp giảm tải cho trình duyệt và tăng tốc độ tải trang.
  6. Linh hoạt: appendChild() cho phép bạn thêm một thành phần con vào bất kỳ vị trí nào trong thành phần cha, cho phép bạn tùy biến vị trí của thành phần con trong giao diện người dùng.
  7. Dễ dàng tái sử dụng: Khi bạn tạo ra một thành phần con và thêm nó vào thành phần cha sử dụng appendChild(), bạn có thể dễ dàng tái sử dụng nó trong các thành phần khác.

Sử dụng appendchild() trong JavaScript như thế nào ?

Sử dụng appendChild() trong JavaScript rất đơn giản và dễ dàng. Để thêm một thành phần con mới vào cuối các thành phần con của một thành phần cha, bạn cần làm những bước sau:

  1. Tạo một đối tượng thành phần con mới sử dụng JavaScript, ví dụ như sử dụng hàm document.createElement() để tạo một thành phần <div> mới.
  2. Lấy đối tượng thành phần cha cần thêm thành phần con mới vào. Bạn có thể sử dụng hàm document.getElementById() hoặc document.querySelector() để lấy thành phần cha.
  3. Sử dụng phương thức appendChild() của đối tượng thành phần cha để thêm thành phần con mới vào, ví dụ như parentElement.appendChild(newChild).

Ví dụ:

//Tạo một thành phần <div> mới

let newDiv = document.createElement("div");

//Tạo một nội dung cho thành phần <div> mới

let newContent = document.createTextNode("Hello World!");

//thêm nội dung vào thành phần <div> mới

newDiv.appendChild(newContent);

//Lấy thành phần cha cần thêm thành phần con mới vào

let parentElement = document.getElementById("container");

// Thêm thành phần <div> mới vào thành phần cha

parentElement.appendChild(newDiv);

Trong ví dụ trên, chúng ta tạo một thành phần <div> mới với nội dung “Hello World!”, sau đó lấy thành phần cha có id “container” và thêm thành phần mới vào.

Lưu ý: Nếu bạn sử dụng appendChild() để thêm một thành phần con vào một thành phần cha đang hiện có trong tài liệu, thành phần đó sẽ được di chuyển từ vị trí hiện tại của nó đến vị trí mới của nó trong thành phần cha đó. Và nó sẽ chỉ là một bản sao của nó trong thành phần cha mới, nó không liên kết với bản gốc nữa.

Nếu bạn muốn liên kết giữa hai thành phần với nhau thì có thể sử dụng .cloneNode(true) trước khi sử dụng .appendChild() để sao chép thành phần đó vào thành phần cha mới.

Khi nào nên sử dụng appendchild() ?

Bạn nên sử dụng appendChild() trong JavaScript khi bạn muốn thêm một thành phần con mới vào cuối các thành phần con của một thành phần cha. 

Điều này hữu ích khi bạn muốn thêm các phần tử mới vào giao diện người dùng, ví dụ như thêm một số lượng các thành phần con từ một mảng hoặc tạo ra một thành phần mới trong JavaScript và thêm nó vào giao diện người dùng. Nó cũng hữu ích khi bạn muốn thay đổi vị trí của một thành phần con trong giao diện người dùng.

Ví dụ về các trường hợp sử dụng appendchild() trong JavaScript .

  1. Tạo mới và thêm một thành phần con mới vào giao diện người dùng:
let newDiv = document.createElement("div");

newDiv.innerHTML = "Hello World!";

document.body.appendChild(newDiv);
  1. Thêm nhiều thành phần con mới vào giao diện người dùng từ một mảng:
let items = ["Item 1", "Item 2", "Item 3"];

let parentElement = document.getElementById("container");

for (let item of items) {

    let newLi = document.createElement("li");

    newLi.innerHTML = item;

    parentElement.appendChild(newLi);

}
  1. Thêm một thành phần con mới vào vị trí đặc biệt trong giao diện người dùng:
let newDiv = document.createElement("div");

newDiv.innerHTML = "I'm the new element";

let referenceNode = document.getElementById("existing-element");

let parentElement = referenceNode.parentNode;

parentElement.insertBefore(newDiv, referenceNode.nextSibling);

Trong các ví dụ trên, chúng tôi sử dụng appendChild() để thêm một hoặc nhiều thành phần con mới vào giao diện người dùng. 

Trong trường hợp 1, chúng tôi tạo ra một thành phần <div> mới với nội dung “Hello World!” và thêm nó vào <body> . 

Trong trường hợp 2, chúng tôi thêm nhiều thành phần <li> vào một thành phần cha có id “container”. 

Trong trường hợp 3, chúng tôi tạo ra một thành phần mới và thêm nó vào vị trí đặc biệt trước hoặc sau một thành phần tồn tại.

Kết luận.

Tổng kết, appendChild() là một phương thức cần thiết cho việc quản lý và thay đổi các thành phần trong giao diện người dùng, giúp bạn thêm các thành phần con mới vào giao diện người dùng một cách dễ dàng, hiệu quả và linh hoạt. Nó cũng giúp giảm tải cho trình duyệt, dễ dàng quản lý và tái sử dụng các thành phần. Nó là một phương thức được hỗ trợ bởi các trình duyệt hiện đại và tương thích với các chuẩn ECMAScript.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now