appendChild JavaScript:Hướng dẫn

Phương thức appendChild () của JavaScript thêm một mục vào cuối nút. appendChild () thường được sử dụng để thêm

mục vào danh sách. Bạn phải sử dụng nhiều câu lệnh appendChild () nếu bạn muốn thêm nhiều mục vào một nút.

Cách sử 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; các danh sách khác chứa các phần tử web tùy chỉnh. Dù có trong danh sách nào đi chăng nữa, thì có một điều chắc chắn:các trang web có đầy các danh sách.

Khi tạo danh sách, bạn thường sẽ mã hóa các giá trị của nó bằng HTML. Quá trình này có thể được đẩy nhanh bằng cách sử dụng một phương pháp có tên JavaScript appendChild . Phương pháp này cho phép bạn thêm một mục vào cuối danh sách hoặc một phần tử web khác, chẳng hạn như một blockquote.

Trong hướng dẫn này, chúng ta sẽ nói về những gì appendChild () trong JavaScript là gì và nó hoạt động như thế nào. Chúng tôi sẽ xem qua một ví dụ để giúp bạn bắt đầu. Hãy bắt đầu!

JavaScript appendChild là gì?

appendChild () thêm một nút vào cuối nút cha. appendChild () thường được sử dụng để thêm các mục vào danh sách HTML. Một nút tham chiếu đến bất kỳ mục nào trong Mô hình đối tượng tài liệu HTML (DOM).

Cú pháp cho appendChild () giống như thế này:

parent.appendChild(child);

"Parent" đề cập đến phần tử mà bạn muốn thêm một phần tử con vào. “Con” là phần tử bạn muốn thêm vào cuối phần tử gốc.

Bạn cần sử dụng một phương thức như JavaScript getElementById () hoặc một “getter” khác để truy xuất một phần tử. Hoặc, bạn có thể tạo một phần tử HTML trong JavaScript và sau đó sử dụng phần tử đó làm đối tượng “cha” với appendChild ().

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Ví dụ, một danh sách các công thức bánh nướng sẽ chứa một danh sách các nút. Các nút này có thể là thẻ

vì chúng tôi sẽ tạo một danh sách.

Một phụ huynh

chứa các thẻ sẽ chứa con điểm giao. Cách sử dụng phổ biến của appendChild () là thêm

vào danh sách, chẳng hạn như một

appendChild ():Ví dụ

Hãy tạo một ứng dụng sử dụng appendChild . Chúng tôi sẽ tạo một trang web tải danh sách tên của các học sinh trong một lớp mười. Chúng tôi sẽ chia điều này thành ba bước:

Thiết lập giao diện người dùng
Lựa chọn và tạo các phần tử
Sử dụng appendChild

Thiết lập giao diện người dùng

Đầu tiên, chúng tôi sẽ thiết lập giao diện người dùng cơ bản hiển thị danh sách tên học sinh của chúng tôi. Mở một tệp có tên là index.html và dán vào mã này:

<!DOCTYPE html>
<html>
    <head>
   	 <title>Tenth Grade Class Roster</title>
   	 <link rel="stylesheet" href="styles.css">
    </head>
    <body>
   	 <h1>Tenth Grade Class Roster</h1>
   	 <ul>
   	 </ul>
    </body>
    <script src="scripts.js"></script>
</html>

Chúng tôi đã tạo một tài liệu HTML cơ bản. Tài liệu này chứa tiêu đề và danh sách không có mục con. Danh sách được trình bày bằng

Tiếp theo, hãy thêm một vài kiểu vào trang của chúng tôi trong một tệp có tên là styles.css để cải thiện tính thẩm mỹ cho trang web của chúng tôi:

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

Quy tắc CSS này sẽ đặt màu nền xám nhạt cho trang của chúng tôi. Chúng tôi làm điều này bằng cách sử dụng thuộc tính màu nền CSS. Nó cũng sẽ di chuyển nội dung của vào giữa trang. Để tìm hiểu thêm về cách chúng tôi cấu trúc bố cục, hãy xem hướng dẫn mô hình hộp CSS của chúng tôi.

Trang của chúng tôi vẫn chưa hoạt động. Chúng tôi chưa thêm bất kỳ phần tử danh sách nào. Đây là trang của chúng tôi trông như thế nào khi bạn mở nó trong trình duyệt:

Rõ ràng là vẫn còn nhiều việc phải làm. Hãy thêm JavaScript vào trang web của chúng tôi.

Chọn và tạo các phần tử

Trước khi có thể bắt đầu thêm các mục vào danh sách của mình, chúng ta cần chọn các yếu tố mà chúng ta sẽ làm việc. Mở một tệp có tên scripts.js và thêm mã này:

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

Dòng mã này sẽ chọn mục trên trang của chúng tôi có thẻ

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

Mã này tạo một nút văn bản có

thẻ có chứa từ “Steven”. Bây giờ, tất cả những gì còn lại phải làm là thêm phần tử mới tạo của chúng tôi vào danh sách của chúng tôi.

Sử dụng Phương thức JavaScript appendChild ()

appendChild () cho phép chúng ta thêm các phần tử vào một nút. Thêm mã sau vào cuối tệp scripts.js của bạn:
```
students.appendChild(li);
```
Thao tác này sẽ thêm mục danh sách mà chúng tôi đã tạo trước đó vào danh sách của chúng tôi. Hãy mở trang web của chúng tôi và xem kết quả:

Danh sách của chúng tôi bây giờ có một mục. Chúng tôi có thể làm cho mã của mình hiệu quả hơn bằng cách tạo một hàm thêm các mục vào danh sách của chúng tôi. Điều này sẽ cho phép chúng tôi thêm nhiều mục mà không cần phải lặp lại createElement của chúng tôi mã từ trước đó.

Thay đổi createElement và textContent dòng mã này:
```
function createStudent(name) {
	let li = document.createElement("li");
li.textContent = name;
return li;
}
```
Chức năng này sẽ tạo một
mới phần tử bất cứ khi nào nó được gọi. Sau đó, thay đổi appendChild () câu lệnh để sử dụng hàm này:
```
students.appendChild(createStudent("Mark"));
students.appendChild(createStudent("Chloe"));
students.appendChild(createStudent("Louise"));
```
Điều này sẽ tạo ra ba học sinh:Mark, Chloe và Louise. Hãy mở lại tệp index.html của chúng tôi và xem liệu các thay đổi của chúng tôi đã được thực hiện hay chưa:

Danh sách lớp của chúng ta hiện có ba cái tên.

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

Bạn có thể di chuyển các mục sang một danh sách khác bằng cách sử dụng appendChild () phương pháp. Hãy thể hiện điều này bằng cách sửa đổi ví dụ của chúng tôi ở trên. Trước tiên, hãy thay đổi trang HTML của chúng tôi để chúng tôi có hai danh sách:
```
…
    <body>
   	 <h1>Tenth Grade Class Roster</h1>
	<h3>Sat Test</h3>
   	 <ul id="sat_test">
   	 </ul>
	<h3>Has Not Sat Test</h3>
<ul id="has_not_sat_test">
   	 </ul>
    </body>
...
```
Chúng tôi đã tạo hai danh sách:sat test và chưa sat test. Bây giờ, hãy cập nhật tệp JavaScript của chúng tôi để chọn hai danh sách và tạo ba sinh viên:
```
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"));
```
Chúng tôi sử dụng phương thức getElementById để chọn hai danh sách của chúng tôi.

Mã này thêm Mark, Chloe và Lucy vào danh sách "chưa được kiểm tra". Louise vừa hoàn thành bài kiểm tra của mình, và vì vậy cô ấy có thể được chuyển sang danh sách khác. Chúng tôi có thể chuyển tên cô ấy bằng cách sử dụng appendChild () phương thức và một phương thức khác được gọi là lastChild :
```
var louise = has_not_sat_test.lastChild;
sat_test.appendChild(louise);
```
Mã này chọn phần tử DOM cuối cùng trong danh sách "chưa được kiểm tra" của chúng tôi. Mục này được truy xuất bằng phương thức lastChild. Tiếp theo, chúng tôi đã thêm mục này vào danh sách "sat test" của chúng tôi.

Hãy mở tệp HTML của chúng tôi:

Chúng tôi có hai danh sách:sat test và chưa sat test. Ban đầu, chúng tôi chuyển tất cả tên học sinh vào danh sách “chưa đạt yêu cầu”. Sau đó, chúng tôi sử dụng appendChild () để chuyển tên của Louise vào danh sách "sat test".

Kết luận

appendChild Phương thức () được sử dụng để tạo một nút ở cuối phần tử. Bạn có thể sử dụng appendChild () để thêm bất kỳ phần tử nào vào danh sách các phần tử. Ví dụ:bạn có thể thêm phần tử
vào thẻ
.

Như một thách thức, hãy thử xem bạn có thể sử dụng appendChild không () Phương pháp JavaScript để tạo lưới hình ảnh. Khi một trang tải, nó sẽ hiển thị danh sách bốn hình ảnh bằng cách sử dụng appendChild ().

Để được hướng dẫn về các tài nguyên học tập và khóa học trực tuyến JavaScript hàng đầu, hãy xem hướng dẫn Cách học JavaScript của chúng tôi.

appendChild JavaScript:Hướng dẫn

Cách sử dụng JavaScript appendChild

JavaScript appendChild là gì?

appendChild ():Ví dụ

Thiết lập giao diện người dùng

Chọn và tạo các phần tử

Sử dụng Phương thức JavaScript appendChild ()

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

Kết luận