持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第16天, 点击查看活动详情

有时您可能需要从JavaScript代码生成输出。例如,您可能希望检查变量的值或向浏览器控制台发送消息,以帮助您调试正在运行的 JavaScript 代码中的问题。

使用 JavaScript 产生输出的方法有很多,例如将输出写入浏览器窗口或控制台、在对话框中显示输出、在HTML 元素中创建输出等。

以下是 JavaScript 显示数据的不同方式:

  • 使用 innerHTML 写入 HTML 元素。
  • 使用 console.log() 写入浏览器控制台。
  • 使用 window.alert() 写入警报框。
  • 使用 document.write() 写入 HTML 输出。
  • 使用内部 HTML

    JavaScript 中的 document.getElementById(id) 方法可用于获取 HTML 元素。
    id 属性定义 HTML 元素。innerHTML 属性定义了 HTML 内容:

    <p id="greet"></p>
    <script>
        document.getElementById("greet").innerHTML = "Hello World!";
    </script>
    

    将输出写入浏览器控制台

    使用 console.log() 方法,您可以轻松地生成消息或将数据写入浏览器控制台。这是产生详细输出的基本但有效的方法。这是一个例子:

    console.log(10 + 20);  //  30
    

    在警报对话框中显示输出

    您还可以使用警告对话框向用户显示消息或输出数据。alert() 方法生成一个警告对话框。例如,考虑以下示例:

    window.alert("告警");
    

    使用 document.write()

    在 HTML 中,document.write() 方法用于将内容或 JavaScript 代码插入到文档中。此方法主要用于测试。它用于从 HTML 文档中删除所有内容并将其替换为新信息。

    document.write("文本");
    

    当您在页面加载后使用 document.write() 方法时,它将覆盖该文档中的任何现有内容。考虑以下示例:

      <h1>标题</h1>
      <p>文本</p>
      <button type="button" onclick="document.write('Hello World!')">Click </button>
    

    注意: document.write() 方法应该只用于测试。

    在本文中演示了如何使用 console.log()、document.write()、document.getElementById() 和 window.alert() 函数在 JavaScript 中显示输出。根据您的选择,您可以通过将输出写入 HTML 元素、在警告框中显示输出或在浏览器控制台窗口中显示输出来在 JavaScript 中生成和显示输出。

    如何在 JavaScript 中使用三元运算符

    最常用的 9 个JavaScript 函数与示例

    如何在 JavaScript 中转换字符串的字符大小写

    如何在 JavaScript 中使用展开运算符

    vocoWone JavaScript
    私信