JavaScript中的四种输出方式

最新推荐文章于 2023-09-18 18:20:35 发布

_板蓝根_

最新推荐文章于 2023-09-18 18:20:35 发布

阅读量1.8k

点赞数 2

分类专栏： WEB 文章标签：弹窗输出控制台输出网页输出

本文链接：https://blog.csdn.net/mulinghanxue/article/details/93381524

版权

WEB 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.弹窗

弹窗属于浏览器事件
格式为:

alert("hello world!");

结果:
在这里插入图片描述
留意:弹窗事件会暂时中断代码运行…等你操作后会继续运行…

2.输出在网页1

输出在网页1写的html语言,属于文档对象事件
格式为:

document.write("<h1>hello world!</h1>");

结果:
在这里插入图片描述

3.输出在控制台

控制台输出的内容不会在网页中显示,所以需要打开浏览器的开发者工具,快捷键F12,有的浏览器可以右键选审查元素…就长这个样子:

在这里插入图片描述
(浏览器其实也是一个IDE,可以使用它进行代码的调试…)
格式:

console.log("hello world!");

结果:
在这里插入图片描述

4.输出在网页2

这种方式需要一个标签来定位,并将数据输出在定位到的标签中…
格式:

document.getElementById("abc").innerHTML="<h1>hello world</h1>";
//选择所有标签中id为abc的元素,进行输入html语言<h1>hello world</h1>

先示范一个错误的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        document.getElementById("abc").innerHTML="<h1>hello world</h1>";
        //document.getElementById("abc").innerHTML="hello world";
        //这种方式只是单纯的文本,不会添加样式,若两个同时存在,后面的会覆盖掉前面的数据
    </script>
</head>
<body>
<p id="abc"></p>
</body>
</html>

html是不会在代码中报错的,但会在浏览器中的开发者模式中报错,上面的错误代码,在网页中会没有任何显示,但是打开开发者模式会出现如下错误:
在这里插入图片描述
结论:因为html网页加载是自上而下的,而script的标签所要操作的p元素还未被加载,就会报错…将script标签放在p标签下面…
结果: