正在加载...

JavaScript 输出

你已经会把脚本放进页面。下一步是：结果出现在哪里——给访客看的页面上、必须关掉的对话框里，还是只给你看的 Console。同一种语言，四个很不一样的去处。

如何把 JavaScript 的结果给人看？

给访客：改一个已经存在的元素——纯文本用 textContent，只有要插入你自己写的标记时才用 innerHTML。会挡住页面的提示用 window.alert。自己排查用 console.log。document.write 是旧式写入流：文件还在解析时往往没事；页面加载完再调用就危险，可能整份文档被换掉。

结果会出现在哪？

📊 常见的结果去处

方法 谁看得见 初学者默认
元素上的 textContent 访客，在页面里 是 — 日常可见输出
元素上的 innerHTML 访客，含 HTML 标签 仅当你写的是标记
window.alert 访客，在对话框里 少用 — 页面等到点确定
console.log 你，在 DevTools 的 Console 适合调试；访客看不见
document.write HTML 流 加载后再别用

写在页面上（给访客的默认）

HTML 里先放真正的标题或段落。脚本运行后（和上一课一样放在 body 末尾）再改那个节点。访客不用打开 DevTools 就能看到新文字。

用 textContent 显示文字

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>

为什么先用 textContent

  • 脚本失败时，HTML 里仍有「Waiting…」
  • 引号和 < 仍是文字，不会变成标签
  • 和把脚本放在 body 末尾是同一套习惯
  • DOM 模块以后再讲；这里只要「把结果放这儿」

innerHTML — 当结果本身是标记

innerHTML 会把字符串当 HTML 解析。你有意插入自己写的标签时再用。不要把用户的原始输入倒进 innerHTML。名字或价格继续用 textContent。

用 innerHTML 插入标记

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>

document.write — 认识它，少用它

document.write 在文件还在解析时把文字写进 HTML 流。若在加载完成之后调用（例如晚点的点击），很多浏览器会开一条新流并清空页面。更新内容请改元素，别养成这个习惯。

document.write 可能清空已加载的页面

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>

打开演示、点按钮，会看到第一段消失。所以本课后面的例子不再用 document.write。

alert — 会卡住页面的对话框

window.alert（通常写成 alert）弹出系统对话框。页面等到访客点确定。用来证明脚本跑过，偶尔可以。当作唯一界面就弱：不能改样式、连弹很烦、还会打断读屏和键盘。真正的提示写在页面上。

一次性的 alert

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>

console.log — 给你看，不是给访客

Console 是开发者工具。console.log 打到那里。手机上的顾客看不见。学习时查看数字或字符串很合适。日志成功并不等于「应用已经把结果展示出来」。

只给开发者的日志

javascript 
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);

打开 DevTools（常见是 F12），切到 Console，刷新，读那几行。若你只改了 console.log，标题仍是「Waiting…」，访客看到的也还是「Waiting…」。

自己动手

  1. 保存 textContent 那页，打开，改字符串，刷新。
  2. 把那一行改成带 <strong> 的 innerHTML，确认文字变粗。
  3. 打开 Console 跑 console.log 示例——页面正文不应出现新内容。
  4. 跑一次 alert；再改成更新标题，让页面不再卡住。
  5. 可选：点 document.write 按钮体会清空——然后从自己的文件里删掉这种写法。

常见错误

  • 只用 console.log 显示结果，却奇怪用户看到空白页
  • 把不是你写的文字（表单、网址、聊天）塞进 innerHTML，而不是 textContent
  • 页面加载后再调用 document.write，整页布局没了
  • 每个按键都 alert
  • 和「写在哪里」搞混：那一课是脚本住在哪；这一课是结果出现在哪

小结

  • 给访客看的默认做法：用 textContent 改元素
  • innerHTML 插入你能控制的标记——不是不可信的字符串
  • alert 会挡住页面；少用
  • console.log 给开发者，在 DevTools 里
  • 加载后再别用 document.write；文档可能被清空
  • 练习把同一句话从 Console 挪到 alert，再挪到标题

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 3 的 4
Javascript 教程