用JavaScript往网页里输出内容，输实现最直接的网页方式是操作DOM。别想复杂了，中何就是输实现找到那个你想放内容的元素，然后把内容塞进去。网页比如你有一个`

这个方法看着简单，输实现但有个坑。网页`innerHTML`会把字符串当HTML解析，中何如果内容是输实现用户输入的，比如评论区，网页那用户输入``，中何脚本就执行了，这叫XSS攻击。我见过不少新手栽在这上面，后来我习惯用`textContent`，它只当纯文本处理，安全多了。但代价是，你想输出带加粗、链接的富文本，`textContent`就无能为力了，得拼接多个元素节点。

再说说另一种场景——不是往已有的元素里塞，而是动态创建一整块结构。比如一个列表，数据是从接口拿的，数量不定。这时候用`document.createElement('ul')`，循环里再`createElement('li')`，每个li设置`textContent`，最后用`appendChild`挂上去。代码会啰嗦一点，但每个节点都是独立的，后续要绑定事件、改样式都方便。

有个细节容易被忽略：脚本放哪。如果你把script写在``里，而它又要操作``里的元素，浏览器解析到script时DOM还没构建完，`getElementById`会返回null，直接报错。解决办法要么把script放到``前，要么用`window.onload`或`DOMContentLoaded`事件包一层。我自己写demo时经常忘，然后F12一看红字，才反应过来。

还有一种“输出”是指生成一整个新页面，比如用`document.write()`。这方法老掉牙了，但偶尔有用。它会在文档流里直接写入内容，如果你在页面加载完后调用，它会清空当前页面再写新的，像换了一张纸。实际项目里几乎不用，除非你写个简单的生成器工具，或者想在控制台里快速看效果。

现在前端框架横行，React、Vue都用虚拟DOM，你很少手动操作真实DOM了。但底层逻辑没变——框架最终也是调用原生API去更新节点。所以理解原生写法，不是过时，是打底子。有一次我调试一个Vue项目，数据没更新，排查半天，最后发现是某个第三方库直接改了DOM，绕过了Vue的响应式系统。如果你不懂原生DOM操作，这种问题根本无从下手。

最后提个不常提的点：性能。频繁用`innerHTML`赋值，浏览器要重新解析HTML字符串，如果内容大，会卡。更优的做法是文档片段`DocumentFragment`——先建一个空片段，把要加的子节点都塞进去，最后一次性`appendChild`到页面。这样只触发一次重排，比循环里一次次加要快得多。我写过一次渲染5000行表格的测试，用fragment比直接操作DOM快了近十倍，肉眼可见的差距。

所以，别被“输出”这个词框住。它不只是显示一句话，而是你在掌控浏览器如何构建页面。从`innerHTML`到`textContent`，从`createElement`到`DocumentFragment`，每个选择都对应不同的场景和代价。写多了你会发现，这就像选工具——锤子能敲钉子，但拧螺丝还得用螺丝刀。