声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

JavaScript显示数据的方式

JavaScript 没有任何打印或者输出的函数，但可以通过以下方式来输出数据

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

1、使用window.alert()

可以通过弹出警告框来显示数据

.html代码

生成页面效果

2、写入到HTML元素

使用 document.getElementById(xxx) 方法来从JavaScript访问某个id为xxx的元素，并通过 innerHTML 来获取或插入元素内容

.html代码

    
    



操作HTML元素练习
原内容

生成页面效果

3、写入到HTML文档

测试直接将JavaScript写入到HTML文档中

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

.html代码

    
    



我的第一个 Web 页面
我的第一个段落。
点我

生成页面效果

1.点击按钮前

2.点击按钮后

4、写入到控制台

在浏览器支持调试的前提下可以使用 console.log() 方法在浏览器中显示 JavaScript 值

可以通过在浏览器中使用 F12 来启用调试模式，也可以右击选择检查选项

在调试窗口中点击 "Console" 菜单进入控制台

实例

a = 5，b = 6 , c = a + b.

将c的值写入到浏览器的控制台

.html代码

    
    



写到控制台练习

    浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

生成页面效果

5、一些扩展知识点

5.1 console.log()的用处

主要是方便你调式JavaScript用的, 可以在控制台看到你在页面中输出的内容。

相比alert他的优点是：

他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：

console.log() 用法也可以像 C 语言一样使用变量：

5.2 关于写入方式

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

5.3 关于解决文档覆盖问题

解决文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖的问题

.html代码

    
    



点击按钮

生成页面效果

观察上图，按我们之前所学知识来讲，第二次使用write方法写入的This is a test.应该会把第一次用write方法写入的This is a new window.覆盖掉才对啊，事实却并非如此，这是为什么呢？

原来是因为：

close方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。如果使用 write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保后边用document.write方法写入HTML的所有文档内容都能显示。document.write() 不会隐式调用 document.close() 方法的，否则例 2 中将不会有 This is a new window. 内容了

一旦调用了close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。

在载入页面后，浏览器输出流自动关闭。在此之后，比如延迟脚本 [setTimeout()] 或是 onload 执行的方法，任何一个对当前页面进行操作的 document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。