如何使用JavaScript获取页面用户输入并在HTML中显示输入内容？

println() 不是浏览器环境的内置JS方法，无法直接将内容渲染到网页中，你可以根据使用场景选择对应方案实现页面输出效果：

你代码里调用的println()是服务端JS运行环境（比如Node.js）、部分编程IDE控制台的打印方法，浏览器端没有这个API，调用后不会在网页可见区域输出内容。

1. 快速测试用：直接写入页面 #

用document.write()可以直接把内容写入HTML文档流，注意如果在页面加载完成后调用这个方法，会覆盖页面上所有已存在的内容，仅适合快速测试场景：

const username = prompt("Your username")
const comment = prompt("Your comment")
document.write(`<p>用户：${username}</p><p>评论：${comment}</p>`)

2. 正式场景推荐：写入指定页面元素 #

先在HTML中预留好承载输出内容的容器，再把获取到的用户输入插入到容器中，不会破坏页面原有结构，是日常开发最常用的方式：
先写HTML结构：

<!-- 输出内容的容器 -->
<div class="comment-card"></div>

对应JS代码：

const username = prompt("Your username")
const comment = prompt("Your comment")
// 定位到页面上的输出容器
const outputBox = document.querySelector('.comment-card')
// 插入文本内容，textContent会自动转义特殊字符，避免恶意脚本注入
outputBox.textContent = `用户：${username}
内容：${comment}`

如果需要给输出内容加HTML样式，可以用innerHTML属性，注意不要直接把未经过滤的用户输入拼接到innerHTML中，避免XSS安全风险。

3. 临时弹窗展示 #

如果只是临时验证输入获取是否正常，可以用alert()触发浏览器弹窗展示内容：

const username = prompt("Your username")
const comment = prompt("Your comment")
alert(`用户名：${username}\n评论内容：${comment}`)

4. 开发调试用：控制台打印 #

开发阶段如果只是想自己看输入结果，不需要展示给普通用户，可以用console.log()把内容打印到浏览器开发者工具的控制台里，按F12就能打开控制台查看：

const username = prompt("Your username")
const comment = prompt("Your comment")
console.log('获取到的用户输入：', {username, comment})

内容的提问来源于stack exchange，提问作者Sankalp Gupta