HTML5页面输出内容有五种方式：一、console.log用于控制台调试；二、document.write仅适用于加载中；三、innerHTML动态更新指定元素HTML；四、textContent输出纯文本防XSS；五、appendChild动态添加新节点。
如果您希望在HTML5页面中输出内容，可以通过浏览器开发者工具的控制台或直接操作网页文档对象模型（DOM）来实现。以下是几种常用的输出方式：
一、使用console.log在浏览器控制台输出
console.log是JavaScript内置的调试方法，用于将信息打印到浏览器开发者工具的Console面板中，适用于开发阶段的调试与信息查看，不影响页面视觉呈现。
1、在HTML文件的<script>标签内或外部JS文件中编写JavaScript代码。</script>
2、调用console.log()函数，并传入需要输出的内容，如字符串、变量、对象或表达式。
立即学习“前端免费学习笔记（深入）”；
3、在浏览器中打开该HTML页面，按F12键打开开发者工具，切换到Console选项卡即可查看输出结果。
4、示例代码：console.log("Hello HTML5");
二、使用document.write向页面写入内容
document.write会将指定字符串直接写入当前HTML文档流中，若在页面加载完成后调用，会导致整个页面被重写清空，因此仅适用于页面加载过程中简单输出。
1、在HTML的
内部或<script>标签中编写JavaScript代码。 <p>2、调用document.write()并传入HTML字符串或纯文本。 <p>3、注意：该方法不支持在DOMContentLoaded事件之后安全使用。 <p>4、示例代码：<strong><font color="green">document.write("<p>这是通过document.write输出的内容</p>"); <h2>三、使用innerHTML修改指定元素的内容 <p>通过获取页面中已有元素的引用，并设置其innerHTML属性，可动态更新该元素内部的HTML结构，是最常用且可控的DOM输出方式。 <p>1、在HTML中定义一个具有唯一id的容器元素，例如<div id="output"></div>。 <p>2、在<script>中使用document.getElementById()获取该元素对象。 <p>3、将该元素的innerHTML属性赋值为所需显示的HTML字符串。 <p>4、示例代码：<strong><font color="green">document.getElementById("output").innerHTML = "内容已更新"; <h2>四、使用textContent仅输出纯文本内容 <p>textContent用于设置或获取元素的纯文本内容，不会解析HTML标签，可防止XSS风险，适合仅需展示文本而不涉及格式的场景。 <p>1、在HTML中创建一个带id的容器，如<span id="text-output"></span>。 <p>2、在JavaScript中通过document.getElementById()获取该元素。 <p>3、将textContent属性设为待显示的字符串。 <p>4、示例代码：<strong><font color="green">document.getElementById("text-output").textContent = "<strong>这不会被解析为HTML</strong>"; <h2>五、使用appendChild动态添加新元素节点 <p>通过创建新的DOM节点并将其附加到现有元素末尾，可实现非覆盖式的增量内容输出，保持原有内容不变。 <p>1、使用document.createElement()创建新元素，如<p>或<div>。 <p>2、使用document.createTextNode()或直接设置innerText/innerHTML为新元素填充内容。 <p>3、使用父元素的appendChild()方法将新节点插入到指定位置。 <p>4、示例代码：<strong><font color="green">const p = document.createElement("p"); p.textContent = "新增段落"; document.body.appendChild(p);</script>
