实例代码详细介绍JavaScript中的输出数据多种方式

本篇文章给大家带来了关于javascript的相关知识，在 javascript 中，不像 java 等语言，它没有任何打印或者输出方法的，在js中通过使用4种方式来输出数据，本文通过实例代码给大家详细介绍，希望对大家有帮助。

【相关推荐：javascript视频教程、web前端】

前言

在 JavaScript 中，不像 Java 等语言，它没有任何打印或者输出方法的，通常使用如下 4 种方式来输出数据。

• 使用 window.alert() 用于弹出警告框
• 使用 document.write() 将内容写入到 HTML 文档中
• 使用 innerHTML 写入到 HTML 元素
• 使用 console.log() 写入到浏览器的控制台

以下分别使用它们来展示一个实例。

立即学习“Java免费学习笔记（深入）”；

window.alert()

新建一个 HTML 文件，然后用 VSCode 写入如下代码。

    
        
        
        
    
    
        
弹窗显示
        

    

接着用浏览器打开上述文件，打开时就会显示如下弹窗，点击确定后弹窗关闭，然后在网页中显示内容。

document.write()

    
        
        
        
    
    
        
写入 HTML 文档
        

    

新建 HTML 文件并写入上述内容后，浏览器打开，页面会显示如下内容，可以看到用 document.write() 写入当前时间是成功的。但是需要注意的是，如果 document.write() 是和其他内容同时在内容加载完之前加载，则可以和其他内容一起显示。但如果等页面内容已经完成加载后执行 document.write()，那么之前页面加载完的内容都将被写入的内容所覆盖。

Python操作Mysql实例代码教程

本文介绍了Python操作MYSQL、执行SQL语句、获取结果集、遍历结果集、取得某个字段、获取表字段名、将图片插入数据库、执行事务等各种代码实例和详细介绍，代码居多，是一桌丰盛唯美的代码大餐。如果想查看在线版请访问：https://www.jb51.net/article/34102.htm

下载

    
        
        
        
    
    
        
写入 HTML 文档
        展示时间
        
    

以下则是等页面加载完成之后，执行 document.write() 前后对比，说明等页面加载完成后调用 document.write() 将覆盖之前的页面内容。

前后

innerHTML

JavaScript 如果要访问某一个 HTML 元素，此时可以使用 document.getElementById(id) 方法，然后就可以利用 innerHTML 来获取或插入元素内容。

    
        
        
        
    
    
        
操纵 HTML 元素
        点击修改上述内容

        

    

修改前修改后

console.log()

要使用 console.log() 方法，需要我们的浏览器支持调试，一般推荐使用 Chrome。然后使用 F12 快捷键打开调试模式，在调试窗口中切换到 Console 菜单。我这里因为使用的是 Edge，所以显示的是控制台，这个主要根据自己的喜好进行浏览器的选择，但是一般更加推荐 Chrome。

    
        
        
        
    
    
        
浏览器调试模式查看
        
    

总结

以上就是关于 JavaScript 中输出的有关内容了，虽然不像 Java 那样有类似 System.out.println() 方法来进行打印和输出，但利用上述的 4 种方式，也能基本满足日常开发中的需求了。

【相关推荐：javascript视频教程、web前端】