createElement và appendChild

Bài học 12 trên 13 trong khóa học Các phương thức DOM trong JavaScript của Coddy.

Hàm (function) createElement() tạo một phần tử HTML mới với tên thẻ được chỉ định (ví dụ: div, p, span). Ví dụ:

const newElement = document.createElement("p");

Hàm appendChild() chèn một phần tử con được chỉ định làm phần tử con cuối cùng của một phần tử khác. Nhờ đó, bạn có thể xây dựng và sửa đổi cấu trúc phân cấp nội dung trên trang web. Ví dụ:

const childElement = document.createElement("p");
childElement.textContent = "This is a new child element.";
parentElement.appendChild(childElement);

Trong ví dụ trên, chúng ta tạo một phần tử mới p rồi chèn nó vào bên trong phần tử parentElement.

Thử thách

Dễ

Bạn được cung cấp đoạn code HTML có danh sách không có thứ tự với ID myList.

Chỉ sử dụng JavaScript, hãy thêm một phần tử danh sách vào danh sách không có thứ tự và thêm văn bản "Dog" vào phần tử đó.

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <ul id="animals">
            <li>Cow</li>
            <li>Ant</li>
            <li>Bear</li>
            <li>Camel</li>
        </ul>
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Các phương thức DOM trong JavaScript

1Giới thiệu

Giới thiệu Mô hình đối tượng tài liệu

2Phương thức DOM I

getElementById Chỉnh sửa kiểu dáng phần tử getElementsByClassName Duyệt qua và thao tác getElementsByTagName querySelector

3Các phương thức DOM II

querySelectorAll addEventListener innerHTMLcreateElement và appendChildChuyển đổi classList

Tự luyện tập: Playground Web