答案：通过监听输入事件并操作DOM可实现实时显示用户内容。使用addEventListener捕获输入，textContent更新文本，createElement创建元素，innerHTML支持富文本但需防范XSS，结合模板或Markdown解析实现预览功能，确保安全与交互性。
当用户在网页中输入内容时，让这些内容实时显示在页面上是常见需求。JavaScript 能直接操作 DOM，把用户输入动态渲染成 HTML 元素，实现交互效果。关键在于监听输入行为，并将值安全地插入到页面中。
获取用户输入并绑定事件
使用 addEventListener 监听输入框的变化，比如 "input" 或 "keyup" 事件，能实时捕获用户输入内容。
示例：
const input = document.getElementById('userInput');
const output = document.getElementById('output');
input.addEventListener('input', function() {
const value = this.value;
output.textContent = value; // 显示纯文本
});
这样每次用户打字，output 区域就会更新文本内容。如果只希望提交后渲染，可改用 "click" 事件绑定按钮。
动态创建 HTML 元素
不只是显示文字，有时需要生成新的 HTML 标签，如列表、段落或链接。可以用 document.createElement 构建元素，再插入页面。
立即学习“前端免费学习笔记（深入）”；
例如用户输入一条待办事项：
const list = document.getElementById('list');
const addBtn = document.getElementById('addBtn');
addBtn.addEventListener('click', function() {
const itemText = input.value.trim();
if (itemText) {
const li = document.createElement('li');
li.textContent = itemText;
list.appendChild(li);
input.value = ''; // 清空输入框
}
});
这种方式结构清晰，还能继续为新元素添加删除按钮等交互功能。
使用 innerHTML 插入富文本（注意安全）
若需支持 HTML 格式输入（如加粗、链接），可用 innerHTML，但必须警惕 XSS 攻击。
不建议直接使用用户输入设置 innerHTML，除非经过过滤。
基本用法：
output.innerHTML = '' + userContent + '';
更安全的做法是使用转义函数处理特殊字符，或引入 sanitize 库清理输入内容。
实时预览与模板渲染
对于 Markdown 编辑器或评论框，常提供“实时预览”功能。监听输入，将文本转换为 HTML 后渲染到预览区。
简单实现：
function renderPreview(markdownText) {
// 简化：将换行转为 br，**text** 转为 text
let html = markdownText
.replace(/\n/g, '
')
.replace(/\*\*(.*?)\*\*/g, '$1');
preview.innerHTML = html;
}
结合事件监听，就能实现边写边看的效果。
基本上就这些。核心是监听输入、创建元素或更新 innerHTML，同时注意避免安全风险。动态渲染让用户看到即时反馈，提升体验，实现也不复杂但容易忽略细节。
