迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > HTML >

在 HTML 正文中显示 JavaScript 变量

作者:迹忆客 最近更新:2023/05/09 浏览次数:

显式定义 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>

输出:

警报

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

如何在 PHP 中获取时间差的分钟数

发布时间:2023/03/29 浏览次数:183 分类:PHP

本文介绍了如何在 PHP 中获取时间差的分钟数,包括 date_diff()函数和数学公式。它包括 date_diff()函数和数学公式。

PHP 中的重定向

发布时间:2023/03/29 浏览次数:136 分类:PHP

本教程演示了如何将用户从页面重定向到 PHP 中的其他页面

PHP 分页

发布时间:2023/03/29 浏览次数:66 分类:PHP

本教程介绍如何在 PHP 中对数据库行进行分页

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便