前端必知必会-JavaScript 输出/显示_js输出html代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_24018193/article/details/143242017

文章目录

JavaScript 输出
总结

JavaScript 输出

JavaScript 可以以不同的方式“显示”数据：

使用 innerHTML 写入 HTML 元素。
使用 document.write() 写入 HTML 输出。
使用 window.alert() 写入警告框。
使用 console.log() 写入浏览器控制台。
使用 innerHTML

要访问 HTML 元素，JavaScript 可以使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个网页</h1>
<p>我的第一个段落</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

更改 HTML 元素的 innerHTML 属性是 HTML 中显示数据的常用方法。

使用 document.write()

出于测试目的，使用 document.write() 很方便：

示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个网页</h1>
<p>我的第一个段落。</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

在 HTML 文档加载后使用 document.write()，将删除所有现有 HTML：

示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个网页</h1>
<p>我的第一个段落。</p>

<button type="button" onclick="document.write(5 + 6)">尝试一下</button>

</body>
</html>

document.write() 方法仅用于测试。

使用 window.alert()

您可以使用警告框显示数据：

示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个网页</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

您可以跳过 window 关键字。

在 JavaScript 中，window 对象是全局范围对象。这意味着变量、属性和方法默认属于 window 对象。这也意味着指定 window 关键字是可选的：

示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个网页</h1>
<p>我的第一个段落。</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

使用 console.log()

为了进行调试，您可以在浏览器中调用 console.log() 方法来显示数据。

示例

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript 打印

JavaScript 没有任何打印对象或打印方法。

您无法从 JavaScript 访问输出设备。

唯一的例外是，你可以在浏览器中调用 window.print() 方法来打印当前窗口的内容。

示例

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">打印此页面</button>

</body>
</html>

总结

本文介绍了JavaScript 输出/显示的使用，如有问题欢迎私信和评论