Sử dụng innerHTML
Để truy cập một phần tử HTML, JavaScript có thể sử dụng phương thức document.getElementById(id)
.
Thuộc tính id
xác định phần tử HTML. Thuộc tính innerHTML
xác định nội dung HTML:
<!DOCTYPE html> <html> <body> <h1>Demo JavaScript</h1> <p>Đoạn văn bản.</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body> </html>
Thay đổi thuộc tính innerHTML
của phần tử HTML là một cách phổ biến để hiển thị dữ liệu trong HTML.
Sử dụng document.write()
Đối với mục đích thử nghiệm, sẽ tiện lợi hơn khi sử dụng document.write()
:
<!DOCTYPE html> <html> <body> <h1>Demo JavaScript</h1> <p>Đoạn văn bản.</p> <script> document.write(5 + 6); </script> </body> </html>
Lưu ý: Sử dụng document.write()
sau khi tải HTML, sẽ xóa tất cả HTML hiện có:
<!DOCTYPE html> <html> <body> <h1>Demo JavaScript</h1> <p>Đoạn văn bản.</p> <button type="button" onclick="document.write(5 + 6)">Thử nó</button> </body> </html>
Chỉ nên sử dụng phương thức document.write()
để thử nghiệm.
Sử dụng window.alert()
Bạn có thể sử dụng alert để hiển thị dữ liệu:
<!DOCTYPE html> <html> <body> <h1>Demo JavaScript</h1> <p>Đoạn văn bản.</p> <script> window.alert(5 + 6); </script> </body> </html>
Bạn có thể bỏ qua từ khóa window
.
Trong JavaScript, đối tượng window
là đối tượng phạm vi global. Điều này có nghĩa là các biến, thuộc tính và phương thức theo mặc định thuộc về đối tượng window
. Điều này cũng có nghĩa là việc chỉ định từ khóa window
là tùy chọn:
<!DOCTYPE html> <html> <body> <h1>Demo JavaScript</h1> <p>Đoạn văn bản.</p> <script> alert(5 + 6); </script> </body> </html>
Sử dụng console.log()