在 HTML 正文中显示 JavaScript 变量
-
使用
innerHTML在 HTML 正文中显示 JavaScript 变量 -
使用
document.write()属性在 HTML 正文中显示 JavaScript 变量 -
使用
window.alert属性在 HTML 正文中显示 JavaScript 变量
显式定义 script 标签并在 HTML 正文中添加必要的输出代码块通常更容易。我们还在 head 标签中使用 script 标签来加载 body 标签之前的 JavaScript 代码。
每个惯例都有它的备注；如果我们需要检查代码是否没有错误，我们可以在 head 部分添加 JavaScript 函数来执行任务。我们还可以在 body 元素中使用 JavaScript 来实现点击事件和其他动态功能。
在这里，我们将演示如何在 HTML 正文中显示 JavaScript 变量，具体来说，我们将在 body 元素中添加我们的代码块。但是在 HTML 正文中传递值和临时显示由 JavaScript 代码约定触发的值是有区别的。
使用 innerHTML 在 HTML 正文中显示 JavaScript 变量
通过获取特定的 id 或 class 并传递变量的值来使用 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>
输出：
使用 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>
输出：
使用 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>
输出：
