JavaScript HTML DOM - Thay đổi HTML
HTML DOM cho phép JavaScript thay đổi nội dung của các phần tử HTML.
Thay đổi nội dung HTML
Cách dễ nhất để sửa đổi nội dung của một phần tử HTML là sử dụng thuộc innerHTML
tính.
Để thay đổi nội dung của một phần tử HTML, hãy sử dụng cú pháp sau:
document.getElementById(id).innerHTML = new HTML
Ví dụ này thay đổi nội dung của một <p>
phần tử:
Thí dụ
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Ví dụ được giải thích:
- Tài liệu HTML ở trên chứa một
<p>
phần tử cóid="p1"
- Chúng tôi sử dụng HTML DOM để lấy phần tử có
id="p1"
- JavaScript thay đổi nội dung (
innerHTML
) của phần tử đó thành "Văn bản mới!"
Ví dụ này thay đổi nội dung của một <h1>
phần tử:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Ví dụ được giải thích:
- Tài liệu HTML ở trên chứa một
<h1>
phần tử cóid="id01"
- Chúng tôi sử dụng HTML DOM để lấy phần tử có
id="id01"
- JavaScript thay đổi nội dung (
innerHTML
) của phần tử đó thành "Tiêu đề mới"
Thay đổi giá trị của một thuộc tính
Để thay đổi giá trị của thuộc tính HTML, hãy sử dụng cú pháp sau:
document.getElementById(id).attribute = new value
Ví dụ này thay đổi giá trị của thuộc tính src của một <img>
phần tử:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Ví dụ được giải thích:
- Tài liệu HTML ở trên chứa một
<img>
phần tử cóid="myImage"
- Chúng tôi sử dụng HTML DOM để lấy phần tử có
id="myImage"
- JavaScript thay đổi
src
thuộc tính của phần tử đó từ "smiley.gif" thành "Landscape.jpg"
Nội dung HTML động
JavaScript có thể tạo nội dung HTML động:
Ngày: Thứ Bảy, ngày 29 tháng 1 năm 2022 23:54:19 GMT + 0000 (Giờ Phối hợp Quốc tế)
Thí dụ
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write ()
Trong JavaScript, document.write()
có thể được sử dụng để ghi trực tiếp vào luồng đầu ra HTML:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Không bao giờ sử dụng document.write()
sau khi tài liệu được tải. Nó sẽ ghi đè lên tài liệu.