在 HTML 正文中显示 JavaScript 变量

Anika Tabassum Era 2023年1月30日
  1. 使用 innerHTML 在 HTML 正文中显示 JavaScript 变量
  2. 使用 document.write() 属性在 HTML 正文中显示 JavaScript 变量
  3. 使用 window.alert 属性在 HTML 正文中显示 JavaScript 变量
在 HTML 正文中显示 JavaScript 变量

显式定义 script 标签并在 HTML 正文中添加必要的输出代码块通常更容易。我们还在 head 标签中使用 script 标签来加载 body 标签之前的 JavaScript 代码。

每个惯例都有它的备注;如果我们需要检查代码是否没有错误,我们可以在 head 部分添加 JavaScript 函数来执行任务。我们还可以在 body 元素中使用 JavaScript 来实现点击事件和其他动态功能。

在这里,我们将演示如何在 HTML 正文中显示 JavaScript 变量,具体来说,我们将在 body 元素中添加我们的代码块。但是在 HTML 正文中传递值和临时显示由 JavaScript 代码约定触发的值是有区别的。

使用 innerHTML 在 HTML 正文中显示 JavaScript 变量

通过获取特定的 idclass 并传递变量的值来使用 innerHTML 是在 HTML 正文中显示 JavaScript 变量的最常见方法之一。

我们将在我们的 HTML 正文中使用 id = "input" 初始化一个 span 标签。然后 script 标签将通过 innerHTML 属性将一个变量发送到该 id = "input"。在 HTML 正文中放置 JavaScript 变量时,这种 DOM 操作很方便。

代码片段:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>  
  <p> Hello! I'm <span id="input"></span>.</p>
  
  <script>
      document.getElementById('input').innerHTML = "Robert" ;
  </script>
</body>
</html>

输出:

innrhtml

使用 document.write() 属性在 HTML 正文中显示 JavaScript 变量

这里,初始化 document.write(parameter) 属性的系统主要用于测试变量。在这种情况下,参数是 JavaScript 中定义的变量或对象。

我们将在段之前的 script 标记中声明变量以显示它。稍后,我们将有一个 p 标签,在其中,另一个 script 标签采用上层脚本的启动。

代码片段:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <script>
      var input = "Gwen";
    function doc(){
      document.write(input);}
  </script>
</head>
<body>  
  <p> Hello! I'm <script>doc(input)</script>.</p>
</body>
</html>

输出:

document_write

使用 window.alert 属性在 HTML 正文中显示 JavaScript 变量

这是通过 DOM 操作测试你的变量的一个非常简单的过程。

我们将定义一个 JavaScript 对象或变量并在此处存储一个随机值。在 script 标签内,我们将声明 window.alert(variable),并且该属性将在触发窗口对象时提示一条消息。

代码片段:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>  
  <script>
      var input = "Hello! I'm Tom.";
      window.alert(input);
  </script>
</body>
</html>

输出:

警报

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

相关文章 - JavaScript Variable