Hiển thị dữ liệu trong Javascript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Hiển thị dữ liệu trong Javascript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

JavaScript có thể “hiển thị” dữ liệu bằng nhiều cách khác nhau:

  • Viết thành một phần tử HTML, sử dụng innerHTML.
  • Ghi vào đầu ra HTML bằng cách sử dụng document.write ().
  • Viết vào một hộp cảnh báo, sử dụng window.alert ().
  • Viết vào giao diện điều khiển của trình duyệt, sử dụng console.log ().

Sử dụng innerHTML

Để truy cập vào 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 định nghĩa nội dung HTML:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id=”demo”></p>

<script>
document.getElementById(“demo”).innerHTML = 5 + 6;
</script>

</body>
</html>

Thay đổi thuộc tính innerHTML của một 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 các mục đích thử nghiệm, sử dụng document.write () khá thuận tiện:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Sử dụng document.write () sau khi một tài liệu HTML được tải đầy đủ, sẽ xóa tất cả HTML hiện có:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button onclick=”document.write(5 + 6)”>Try it</button>

</body>
</html>

Phương thức document.write () chỉ nên được sử dụng để thử nghiệm.

Sử dụng window.alert()

Bạn có thể sử dụng một hộp cảnh báo để hiển thị dữ liệu:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Sử dụng console.log()

Đối với mục đích gỡ lỗi, bạn có thể sử dụng phương pháp console.log () để hiển thị dữ liệu.

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>