在Web前端开发中，向HTML元素内部填入内容是最基础的操作之一。根据业务场景不同，可以选择静态写入、脚本修改或者安全文本插入等方式来完成HTML元素的内容填充。
一、直接在HTML中填充内容
最简单的方式就是把内容直接写在标签之间。这种方法在页面结构固定时非常直观，浏览器加载后就会显示出来。
<div class="box"> 这是直接填充的文本内容 <p>里面还可以嵌套其他HTML元素</p> </div>
二、使用JavaScript填充内容
1. innerHTML方式
如果希望向元素中插入包含标签的字符串，可以使用innerHTML属性。下面的例子会把一段带样式的HTML写进容器。
// 获取元素
var box = document.getElementById('box');
// 使用innerHTML填充内容
box.innerHTML = '<strong>动态填充</strong>的内容';
2. textContent方式
当你只想要纯文本，不希望字符串里的尖括号被当成标签解析时，用textContent更安全，也能避免注入风险。
var box = document.getElementById('box');
// 文本中的<script>不会被当作脚本执行
box.textContent = '普通文本 <span>不会被解析为标签</span>';
三、对比与选择
不同填充方式的特点可以归纳如下：
| 方式 | 是否解析HTML | 适用场景 |
|---|---|---|
| 静态写入 | 是 | 固定页面结构 |
| innerHTML | 是 | 需要动态插入标签 |
| textContent | 否 | 展示用户文本、防注入 |
四、注意事项
- 使用innerHTML拼接用户输入时，要做转义处理，防止XSS问题。
- 在循环里频繁修改innerHTML会影响性能，可以考虑用文档片段。
- 如果只需改文字，优先用textContent而不是innerHTML。
总结：HTML元素内容填充并不复杂，选对方法能让代码既好懂又安全。