JS常用的输出方式

2021-07-07 本文已影响0人微语博客

JS如何输出内容，常用的输出方式有哪些，本篇文章给大家介绍一下常用的六种JS输出方式。

console.log()

使用控制台输出，这种方式是最常用的，可以输出任何数据类型。一般快捷键F12可以打开浏览器控制台，使用console.log()输出内容不会中断程序执行，方便开发人员进行调试的。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script>
        console.log("Hello World!");
        console.log("你好");
    </script>
</body>    
</html>

alert()

alert()是浏览器的弹框函数，默认弹出一个带参数的警告框，每个浏览器展现的方式不尽相同。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script>
        alert("警告框");//无返回值
        alert("warning");
    </script>
</body>    
</html>

confirm()

和alert()使用和作用都差不多，不同的是这里弹出一个确认框，函数返回一个布尔值。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script>
        confirm("是否删除？");//返回布尔值 根据用户点击按钮返回
        confirm("warning");
    </script>
</body>    
</html>

alert()函数不带返回值，一般用于提示预警，confirm()返回一个布尔值，一般用于询问语境。

prompt()

prompt也是一个弹出框函数，用于接收用户输入的数据。函数接收两个字符串参数，返回一个字符串类型数据。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script>
        var str = prompt("请输入你的名字","Crice");//参数一:提示词;参数二:默认返回数据
        console.log(str);
    </script>
</body>    
</html>

innerHTML&innerText

这两不是函数，而是属性，用于设置相应元素的内容。innerHTML值可以包含HTML元素（渲染字符串里的标签），而innerText不会渲染。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="myId"></div>
    <div class="myCls"></div>
    <div></div>
    <script>
        document.getElementById("myId").innerHTML = "Hello World!";
        //输出Hello World
        document.getElementsByClassName("myCls")[0].innerHTML = "<h1>Hello World</h1>";
        //输出大写加粗的Hello World
        document.getElementsByTagName("div")[2].innerText = "<h1>Hello World</h1>";
        //原样输出<h1>Hello World</h1>不会进行渲染
    </script>
</body>    
</html>

使用innerHTML和innerText需要先获取到DOM实例，获取DOM元素的方法也有很多（上面的代码展示了三种），这里就不再详述了。如果获取的对象不存在，就会出现报错。

document.write()

document.write()向文档流写入内容，直接将内容打印到页面中。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script>
        document.write("Hello World!");//向文档直接写入
    </script>
</body>    
</html>