可在 HTML5 中用 JavaScript 实现内容输出：一、console.log 向控制台输出调试信息；二、document.write 在加载时写入文档流；三、innerHTML 动态更新指定元素的 HTML 内容；四、textContent 插入转义后的纯文本；五、appendChild 动态添加新 DOM 节点。
如果您希望在 HTML5 页面中通过 JavaScript 实现内容输出，可以通过 console.log 在 浏览器 开发者 工具 中查看信息，或通过操作 DOM 将内容显示在网页上。以下是实现这两种输出方式的具体步骤：
一、使用 console.log 在控制台输出内容
console.log 是浏览器开发者工具提供的调试方法，用于向控制台输出文本、变量值或对象结构，不直接影响页面显示，但便于开发过程中的信息追踪和错误排查。
1、在 HTML 文件的
2、调用 console.log()函数，并传入需要输出的内容，例如字符串、数字、数组或对象。
立即学习 “ 前端免费学习笔记（深入）”；
3、在浏览器中打开该 HTML 页面，按 F12 键打开开发者工具，切换到 Console 面板，即可看到输出结果。
4、可同时输出多个参数，如 console.log(“ 用户 ID：”, 123, true)，各参数以空格分隔显示。
二、使用 document.write 直接写入 HTML 文档流
document.write 用于在页面加载过程中向当前文档流写入字符串内容，适用于简单静态输出，但仅在页面解析阶段有效，若在页面加载完成后调用会清空整个文档。
1、确保 script 标签位于
内部或 body 加载完成前的位置。
2、调用 document.write()并传入合法 HTML 字符串，例如 document.write(“
欢迎访问
“)。
3、注意避免在 DOMContentLoaded 事件之后或异步代码中使用，否则将导致页面 重绘 异常。
三、使用 innerHTML 修改指定元素的内容
innerHTML 允许向具有唯一标识（如 id）的 HTML 元素注入 HTML 格式内容，是最常用且安全的动态内容更新方式，支持富文本渲染和多次修改。
1、在 HTML 中创建一个容器元素，例如
。
2、在 JavaScript 中通过 document.getElementById 获取该元素引用。
3、将目标内容赋值给该元素的 innerHTML 属性，例如 element.innerHTML = “ 当前时间：” + new Date().toLocaleString()。
4、可重复执行此操作以实现内容动态刷新，无需重新加载页面。
四、使用 textContent 设置纯文本内容
textContent 用于向指定元素插入纯文本内容，不解析 HTML 标签，可防止 XSS 攻击，适合显示用户输入或需转义的原始数据。
1、准备一个带 id 的空白容器，例如。
2、通过 document.getElementById(“text-result”)获取元素对象。
3、设置其 textContent 属性为所需字符串，例如 el.textContent = “ 用户名：admin”。
4、若内容含特殊字符（如、&），浏览器会自动转义，确保显示为字面量而非 HTML 结构。
五、使用appendChild 动态添加新节点
appendChild 用于将新创建的 DOM 节点追加到现有元素末尾，适合构建结构化内容，如列表项、段落或带样式的输出块。
1、使用 document.createElement 创建新元素，例如 const p = document.createElement(“p”)。
2、设置新元素的文本内容，例如 p.textContent = “ 操作成功 ”。
3、获取目标父容器，例如 const container = document.getElementById(“log-area”)。
4、调用 container.appendChild(p)将新段落插入到容器底部。
