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>
网友评论