Hướng dẫn javascript display variable in div - biến hiển thị javascript trong div

Question

Tìm hiểu cách sử dụng giá trị biến JavaScript trong trang HTML.

Nội dung chính Show

Hiển thị biến JavaScript bằng phương pháp document.write()
Hiển thị biến JavaScript bằng thuộc tính bên trong.
Hiển thị biến JavaScript bằng phương thức Window.Alert ()
Sự kết luận
Làm thế nào hiển thị biến JavaScript trong HTML Div?
Làm thế nào để bạn in một biến trong JavaScript?
Làm thế nào đặt giá trị biến JavaScript trong HTML?
Làm thế nào gửi dữ liệu từ JavaScript đến HTML?

Có ba cách để hiển thị các giá trị biến JavaScript trong các trang HTML:

Hiển thị biến bằng phương pháp document.write()

Hiển thị biến thành nội dung phần tử HTML bằng cách sử dụng thuộc tính

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

0

Hiển thị biến bằng phương pháp

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

1

Hướng dẫn này sẽ chỉ cho bạn cách sử dụng cả ba cách để hiển thị các biến JavaScript trong các trang HTML. Hãy bắt đầu với việc sử dụng phương pháp document.write().

Hiển thị biến JavaScript bằng phương pháp document.write()

Phương thức document.write() cho phép bạn thay thế toàn bộ nội dung của thẻ HTML

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

5 bằng các biểu thức HTML và JavaScript mà bạn muốn được hiển thị bên trong thẻ

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

5. Giả sử bạn có phần tử HTML sau:

<body>
  <h2>Hello World</h2>
  <p>Greetings</p>
</body>

Khi bạn chạy phương thức

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

7 trên phần HTML ở trên, nội dung của

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

5 sẽ được thay thế như sau:

Biết được điều này, bạn có thể hiển thị bất kỳ giá trị biến JavaScript nào bằng cách chuyển tên biến làm tham số cho phương thức document.write():

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

Phương pháp document.write() thường chỉ được sử dụng cho mục đích thử nghiệm vì nó sẽ xóa bất kỳ phần tử HTML hiện có nào trong thẻ

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

5 của bạn. Hầu hết, bạn sẽ muốn hiển thị một biến JavaScript bên cạnh các phần tử HTML của bạn. Để làm điều đó, bạn cần sử dụng phương pháp tiếp theo.

Hiển thị biến JavaScript bằng thuộc tính bên trong.

Mỗi phần tử HTML có thuộc tính

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

0 chứa nội dung của phần tử đó. Trình duyệt cho phép bạn thao tác thuộc tính

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

0 bằng cách sử dụng JavaScript bằng cách chỉ định thuộc tính cho một giá trị khác.

Ví dụ: hãy tưởng tượng bạn có thẻ HTML

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

5 sau:

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Greetings</p>
</body>

Bạn có thể thay thế nội dung của thẻ

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Greetings</p>
</body>

5 bằng cách lần đầu tiên truy xuất phần tử bằng định danh của nó. Vì phần tử

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Greetings</p>
</body>

5 có thuộc tính

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Greetings</p>
</body>

7 với giá trị

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Greetings</p>
</body>

8, bạn có thể sử dụng phương thức

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Greetings</p>
</body>

9 để truy xuất nó và thay đổi thuộc tính ____10 của nó.

Đây là cách bạn làm điều đó:

document.getElementById("greeting").innerHTML = "Bonjour";

Nội dung của thẻ

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Greetings</p>
</body>

5 sẽ được thay đổi như sau:

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Bonjour</p>
</body>

Biết được điều này, bạn chỉ có thể bọc không gian nơi bạn muốn biến JavaScript của mình được hiển thị với phần tử

document.getElementById("greeting").innerHTML = "Bonjour";

2 như sau:

<body>
  <h2>Hello, my name is <span id="name"></span></h2>
  <script>
    let name = "Nathan";
    document.getElementById("name").innerHTML = name;
  </script>
</body>

Mã trên sẽ xuất ra HTML sau:

<h2>Hello, my name is <span id="name">Nathan</span></h2>

Và đó là cách mà bạn có thể hiển thị các giá trị biến JavaScript bằng thuộc tính

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

0.

Hiển thị biến JavaScript bằng phương thức Window.Alert ()

Phương thức

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

1 cho phép bạn khởi chạy hộp thoại ở phía trước trang HTML của bạn. Ví dụ: khi bạn thử chạy trang HTML sau:

<body>
  <h2>Hello World</h2>
  <script>
    window.alert("Greetings");
  </script>
</body>

Hộp thoại sau đây sẽ xuất hiện trong trình duyệt của bạn:

Việc triển khai cho mỗi trình duyệt sẽ hơi khác nhau, nhưng tất cả đều hoạt động giống nhau. Biết được điều này, bạn có thể dễ dàng sử dụng hộp thoại để hiển thị giá trị của biến JavaScript. Chỉ cần chuyển tên biến cho phương thức

document.getElementById("greeting").innerHTML = "Bonjour";

5 như sau:

<body>
  <h2>Hello World</h2>
  <script>
    let name = "Nathan JS"
    window.alert(name);
  </script>
</body>

Mã trên sẽ khởi chạy một hộp thoại hiển thị giá trị của biến

document.getElementById("greeting").innerHTML = "Bonjour";

6.

Sự kết luận

Hiển thị các biến JavaScript trong các trang HTML là một nhiệm vụ phổ biến cho các nhà phát triển web. Các trình duyệt hiện đại cho phép bạn thao tác nội dung HTML bằng cách gọi các phương thức API JavaScript lộ ra.

Cách phổ biến nhất để hiển thị giá trị của biến JavaScript là bằng cách thao tác giá trị thuộc tính ____1010, nhưng khi kiểm tra các biến của bạn, bạn cũng có thể sử dụng các phương thức document.write() hoặc

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

1. Bạn có thể tự do sử dụng phương pháp phù hợp với bạn nhất.

Làm thế nào hiển thị biến JavaScript trong HTML Div?

Có ba cách để hiển thị các giá trị biến JavaScript trong các trang HTML:..

Hiển thị biến bằng tài liệu. viết phương pháp..

Hiển thị biến cho nội dung phần tử HTML bằng cách sử dụng thuộc tính bên trong ..

Hiển thị biến bằng cửa sổ. Phương thức cảnh báo () ..

Làm thế nào để bạn in một biến trong JavaScript?

log () là một hàm trong javascript được sử dụng để in bất kỳ loại biến nào được xác định trước đó trong đó hoặc chỉ in bất kỳ thông báo nào cần được hiển thị cho người dùng.Cú pháp: Bảng điều khiển.log (""); is a function in JavaScript that is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user. Syntax: console. log(" ");

Làm thế nào đặt giá trị biến JavaScript trong HTML?

Bạn không thể sử dụng các biến JS bên trong HTML.Để thêm nội dung của biến JavaScript vào HTML sử dụng bên trong () hoặc tạo bất kỳ thẻ HTML nào, hãy thêm nội dung của biến đó vào thẻ đã tạo và nối thẻ đó vào phần thân hoặc bất kỳ thẻ hiện có nào khác trong HTML.Lưu câu trả lời này.use innerHTML() or create any html tag, add the content of that variable to that created tag and append that tag to the body or any other existing tags in the html. Save this answer.