Chèn HTML bằng JS

Bài học 15 trên 18 trong khóa học Dự án mây chuyển động với HTML/CSS/JS của Coddy.

Trong hai bài học tiếp theo, chúng ta sẽ dùng JavaScript để thêm mây!

Phương thức (method) document.getElementById() trả về một đối tượng phần tử, đại diện cho phần tử có thuộc tính id khớp với chuỗi được chỉ định. Vì ID của phần tử phải là duy nhất nếu được chỉ định, chúng là cách hữu ích để nhanh chóng truy cập một phần tử cụ thể. Ví dụ:

const elem = document.getElementById("myid");

Ví dụ sau lấy phần tử có id “myid” và lưu phần tử đó vào một biến có tên là elem.

Sau khi lấy được đối tượng phần tử, bạn có thể thay thế HTML bên trong phần tử đó:

elem.innerHTML = '<p>Hello!</p>';

Ví dụ, nếu đoạn code HTML của bạn là:

<div id="myid">
</div>

Sau khi thêm nội dung như trên, đoạn code HTML sẽ trông như thế này:

<div id="myid">
	<p>Hello!</p>
</div>

Thử thách

Dễ

Nhiệm vụ của bạn là chèn thẻ h1 có nội dung "Some text" vào phần tử có id bằng “container” (vùng chứa đám mây của chúng ta).

Thêm đoạn code mới vào đầu tệp JavaScript, đừng xóa những gì bạn đã làm.

Lưu ý: Thao tác này sẽ thay thế phần tử đám mây hiện có, đừng lo, chúng ta sẽ khôi phục đám mây trong bài học tiếp theo.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>