DOM HTML JavaScript - 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 phần tử HTML là sử dụng thuộc tính innerHTML
.
Để thay đổi nội dung của 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 phần tử <p>
:
Ví dụ
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Hãy tự mình thử »Ví dụ giải thích:
- Tài liệu HTML ở trên chứa phần tử
<p>
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 phần tử <h1>
:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Hãy tự mình thử »Ví dụ giải thích:
- Tài liệu HTML ở trên chứa phần tử
<h1>
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ị thuộc tính src của phần tử <img>
:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Hãy tự mình thử »Ví dụ giải thích:
- Tài liệu HTML ở trên chứa phần tử
<img>
cóid="myImage"
- Chúng tôi sử dụng HTML DOM để lấy phần tử có
id="myImage"
- JavaScript thay đổi thuộc tính
src
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:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
Hãy tự mình thử »tài liệu.write()
Trong JavaScript, document.write()
có thể được sử dụng để ghi trực tiếp vào luồng đầu ra HTML:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Hãy tự mình thử » 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.