JavaScript HTML DOM - Thay đổi HTML

HTML DOM cho phép JavaScript thay đổi nội dung của phần tử HTML.

Thay đổi luồng đầu ra HTML

JavaScript có thể tạo nội dung HTML động:

Trong JavaScript,document.write() Có thể sử dụng để ghi trực tiếp vào luồng đầu ra HTML:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

Thử ngay

Đừng bao giờ sử dụng document.write() sau khi tài liệu đã được tải xong document.write(). Điều này sẽ ghi đè tài liệu.

Thay đổi nội dung HTML

Cách đơn giản nhất để thay đổi nội dung HTML tài liệu là sử dụng innerHTML Thuộc tính.

Để thay đổi nội dung của phần tử HTML, hãy sử dụng cú pháp này:

document.getElementById(id).innerHTML = text mới

Ví dụ này đã thay đổi <p> Nội dung của phần tử:

Ví dụ

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

Thử ngay

Giải thích ví dụ:

  • HTML tài liệu trên chứa phần tử <p> có id="p1"
  • Chúng ta sử dụng HTML DOM để lấy phần tử này có id="p1"
  • JavaScript sẽ thay đổi nội dung của phần tử này (innerHTML) thành "Hello Kitty!"

Ví dụ này đã thay đổi <h1> Nội dung của phần tử:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

Thử ngay

Giải thích ví dụ:

  • HTML trên chứa phần tử <h1> có id="header"
  • Chúng ta đã sử dụng HTML DOM để lấy phần tử có id="header"
  • JavaScript thay đổi nội dung của phần tử này (innerHTML)

Thay đổi giá trị thuộc tính

Để thay đổi giá trị của thuộc tính HTML, hãy sử dụng ngữ pháp sau:

document.getElementById(id).thuộc tính = giá trị mới

Ví dụ này đã thay đổi <img> của phần tử src Giá trị của thuộc tính:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Thử ngay

Giải thích ví dụ:

  • HTML tài liệu trên chứa một phần tử <img> có id="myImage"
  • Chúng ta 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ử này từ "smiley.gif" thành "landscape.jpg"