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