JavaScript 四种常用输出方法
1. document.write()
作用：直接将内容写入 HTML 文档输出流。
特点：
-
如果在文档加载完成后调用，会重写整个页面内容。
-
多用于测试或简单示例。
语法示例：document.write("Hello, World!");
2. innerHTML
作用：设置或获取指定 HTML 元素的内容。
特点：
-
可以动态修改页面指定部分的内容。
-
能够识别并渲染 HTML 标签。
语法示例：document.getElementById("demo").innerHTML = "<strong>更新内容</strong>";
3. alert()
作用：弹出警告对话框显示信息。
特点：
-
模态对话框（用户必须点击“确定”才能继续）。
-
主要用于调试或简单提示。
语法示例：alert("这是一个警告信息");
4. console.log()
作用：将信息输出到浏览器的控制台。
特点：
-
主要用于调试和开发。
-
不会影响页面显示，用户一般看不到。
语法示例：console.log("调试信息"); console.log("变量值：", myVariable);
🎯 使用场景总结
| 方法 | 主要用途 | 影响对象 |
|---|---|---|
document.write() |
向文档写入内容（加载期间） | 整个HTML文档 |
innerHTML |
动态更新特定元素内容 | 指定HTML元素 |
alert() |
显示警告或提示信息 | 模态对话框 |
console.log() |
开发调试输出 | 浏览器控制台 |
⚠️ 注意事项
- document.write()：在文档加载完成后使用会覆盖整个页面，谨慎使用。
- innerHTML：存在XSS攻击风险，如需插入用户输入内容请先转义。
- alert()：会阻塞代码执行直到用户点击确认，影响用户体验。
- console.log()：发布生产环境前应移除或控制输出。
最佳实践：开发时多用
console.log()调试，用户交互信息推荐使用innerHTML或更现代的DOM操作方法，避免过度使用alert()。
