JavaScript appendChild: Hướng dẫn thêm nút con vào DOM

Phương thức JavaScript appendChild() thêm mục vào cuối một node. appendChild() thường dùng thêm mục <li> vào danh sách. Phải dùng nhiều câu lệnh appendChild() nếu muốn thêm nhiều mục vào một node.

Cách dùng JavaScript appendChild

Một số danh sách chứa văn bản; danh sách khác chứa hình ảnh; danh sách khác chứa phần tử web tùy chỉnh. Dù chứa gì, một điều chắc chắn: trang web đầy danh sách.

Khi tạo danh sách, thường hardcode giá trị bằng HTML. Quá trình này có thể tăng tốc dùng phương thức JavaScript appendChild. Phương thức này cho phép thêm mục vào cuối danh sách hoặc phần tử web khác, như blockquote.

Trong hướng dẫn này, ta nói về appendChild() trong JavaScript là gì và cách hoạt động. Sẽ đi qua ví dụ giúp bạn bắt đầu. Bắt đầu nào!

JavaScript appendChild là gì?

appendChild() thêm node vào cuối parent node. appendChild() thường dùng thêm mục vào danh sách HTML. Node tham chiếu bất kỳ mục nào trong HTML Document Object Model (DOM).

Cú pháp appendChild():

parent.appendChild(child);

"parent" tham chiếu phần tử bạn muốn thêm child. "child" là phần tử bạn muốn nối vào cuối parent.

Cần dùng phương thức như JavaScript getElementById() hoặc "getter" khác truy xuất phần tử. Hoặc, tạo phần tử HTML trong JavaScript rồi dùng phần tử đó làm object "parent" với appendChild().

Ví dụ: danh sách công thức bánh scone chứa các node. Các node này có thể là thẻ <li> vì tạo danh sách.

Parent <div> chứa thẻ <img> sẽ chứa child <img> node. Dùng phổ biến appendChild() thêm thẻ <li> vào danh sách như <ul> hoặc <ol>.

Ví dụ appendChild() JavaScript

Tạo ứng dụng dùng appendChild. Ta tạo site tải danh sách tên học sinh lớp 10. Chia thành ba bước:

• Thiết lập front end
• Chọn và tạo phần tử
• Dùng appendChild

Thiết lập Front End

Đầu tiên, setup front end cơ bản hiển thị danh sách tên học sinh. Mở file index.html và dán code:

<!DOCTYPE html>
<html>
<head>
  <title>Danh sách lớp 10</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Danh sách lớp 10</h1>
  <ul>
  </ul>
  </body>
  <script src="scripts.js"></script>
</html>

Tạo tài liệu HTML cơ bản. Chứa tiêu đề và danh sách không có child item. Danh sách dùng thẻ <ul>.

Thêm style vào file styles.css cải thiện thẩm mỹ:

body {
  background-color: #f7f7f7;
  margin: auto;
  width: 50%;
}

CSS rule đặt màu nền xám nhạt. Căn giữa nội dung <body>. Để hiểu thêm layout, xem hướng dẫn CSS box model.

Trang chưa functional. Chưa thêm list element. Trang trông như sau:

Rõ ràng còn việc làm. Thêm JavaScript vào trang.

Chọn và Tạo Phần tử

Trước khi thêm mục vào danh sách, cần chọn phần tử làm việc. Mở scripts.js thêm code:

const students = document.querySelector("ul");

Dòng code chọn mục trên trang có thẻ <ul>. Đại diện danh sách. Tiếp theo, tạo phần tử thêm vào danh sách:

let li = document.createElement("li");
li.textContent = "Steven";

Code tạo text node có thẻ <li> chứa từ "Steven". Còn lại dùng appendChild() thêm phần tử mới tạo vào danh sách.

Dùng phương thức appendChild() JavaScript

appendChild() cho phép thêm phần tử vào node. Thêm code sau vào cuối scripts.js:

students.appendChild(li);

Sẽ thêm list item tạo trước vào danh sách. Mở trang web xem kết quả:

Để code hiệu quả hơn, tạo hàm thêm mục vào danh sách. Cho phép thêm nhiều mục không lặp code createElement.

Thay đổi code createElement và textContent thành:

function createStudent(name) {
  let li = document.createElement("li");
  li.textContent = name;
  return li;
}

Hàm này tạo <li> mới mỗi lần gọi. Thay đổi statement appendChild() dùng hàm này:

students.appendChild(createStudent("Mark"));
students.appendChild(createStudent("Chloe"));
students.appendChild(createStudent("Louise"));

Tạo ba học sinh: Mark, Chloe, Louise. Mở index.html xem thay đổi:

Di chuyển mục sang danh sách khác

Có thể di chuyển mục sang danh sách khác dùng appendChild(). Demo bằng cách sửa ví dụ trên. Đầu tiên, đổi HTML thành hai danh sách:

...
<body>
  <h1>Danh sách lớp 10</h1>
  <h3>Đã thi SAT</h3>
  <ul id="sat_test">
  </ul>
  <h3>Chưa thi SAT</h3>
  <ul id="has_not_sat_test">
  </ul>
</body>
...

Tạo hai danh sách: đã thi SAT và chưa thi SAT. Cập nhật JavaScript chọn hai danh sách và tạo ba học sinh:

const sat_test = document.getElementById("sat_test");
const has_not_sat_test = document.getElementById("has_not_sat_test");

function createStudent(name) {
  let li = document.createElement("li");
  li.textContent = name;
  return li;
}

has_not_sat_test.appendChild(createStudent("Mark"));
has_not_sat_test.appendChild(createStudent("Chloe"));
has_not_sat_test.appendChild(createStudent("Louise"));

Dùng getElementById chọn hai danh sách.

Code thêm Mark, Chloe, Lucy vào danh sách "chưa thi SAT". Louise vừa thi xong, nên chuyển sang danh sách kia. Dùng appendChild() và phương thức lastChild di chuyển tên:

var louise = has_not_sat_test.lastChild;
sat_test.appendChild(louise);

Code chọn phần tử DOM cuối trong danh sách "chưa thi SAT". Mục này lấy bằng lastChild. Tiếp theo, nối mục này vào danh sách "đã thi SAT".

Mở file HTML:

Có hai danh sách: đã thi SAT và chưa thi SAT. Ban đầu chuyển tất cả tên vào "chưa thi SAT". Sau đó dùng appendChild() chuyển tên Louise sang "đã thi SAT".

Kết luận

Phương thức appendChild() dùng tạo node ở cuối phần tử. Có thể dùng appendChild() thêm bất kỳ phần tử nào vào danh sách phần tử. Ví dụ: thêm <div> vào <section>.

Thử thách: xem có dùng appendChild() JavaScript tạo lưới hình ảnh không. Khi tải trang, render danh sách bốn hình ảnh dùng appendChild().

Hướng dẫn khóa học JavaScript online top, tài nguyên, xem How to Learn JavaScript guide.