在 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>
输出:
相关文章
如何在 PHP 中获取时间差的分钟数
发布时间:2023/03/29 浏览次数:183 分类:PHP
-
本文介绍了如何在 PHP 中获取时间差的分钟数,包括 date_diff()函数和数学公式。它包括 date_diff()函数和数学公式。