如何在 html 中打印 javascript 中变量的值

📌 相关文章

📜 如何在 html 中打印 javascript 中变量的值 - Javascript (1)

📅 最后修改于: 2023-12-03 15:24:11.334000 🧑 作者: Mango

在 JavaScript 中，我们经常会定义变量并存储一些值。有时候我们需要在 HTML 中将这些值打印出来。这篇文章将介绍两种方法来实现这一目标。

方法一：使用 document.write()

JavaScript 中的 document.write() 函数可以将文本插入到 HTML 页面中。我们可以使用该函数来打印变量的值。

以下是示例代码：

var myVar = "Hello World!";
document.write(myVar);

该代码会在 HTML 页面上打印出 "Hello World!"。请注意，所有的输出都会写入到 HTML 页面中：

<!DOCTYPE html>
<html>
<body>

<script>
  var myVar = "Hello World!";
  document.write(myVar);
</script>

</body>
</html>

该示例成功将变量 myVar 的值打印在 HTML 页面上。

方法二：使用 innerHTML

除了使用 document.write()，我们还可以使用 HTML 元素的 innerHTML 属性来将变量值打印到 HTML 页面上。请参考以下代码：

var myVar = "Hello World!";
document.getElementById("demo").innerHTML = myVar;

这段代码会将变量 myVar 的值输出到 id 为 "demo" 的 HTML 元素中。

<!DOCTYPE html>
<html>
<body>

<h1 id="demo"></h1>

<script>
  var myVar = "Hello World!";
  document.getElementById("demo").innerHTML = myVar;
</script>

</body>
</html>

该示例中，变量 myVar 的值被写入到 <h1> 元素的 innerHTML 属性中。结果在网页上输出 "Hello World!"。

结语

以上介绍了两种方法来在 HTML 中将 JavaScript 变量的值打印出来。使用 document.write() 将输出直接插入到 HTML 页面中，而使用 innerHTML 可以将结果插入到指定的 HTML 元素中。

加强学习可以尝试其他的 JavaScript 输出方法，如 console.log()。