直接设置 input/textarea 的 value 属性最可靠，dom 就绪后赋值即可；勿用 innerhtml 或 setattribute(‘value’)；动态插入需确保已挂载；表单重置会恢复 html 初始值而非 js 所设值。
用 value 属性直接赋值最可靠
HTML 文本框（<input type="text"> 或 <textarea></textarea>）的初始值，不是靠 JS 模拟输入，而是直接设置其 value 属性。DOM 加载完成后执行即可，不需要触发 input 事件——除非后续逻辑依赖事件监听。
常见错误是误用 innerHTML 或 textContent，它们对 <input> 无效；也有人试图用 setAttribute('value', ……)，这只能影响 HTML 源码里的初始值，对已渲染的 DOM 不起作用。
- ✅ 正确：
document.getElementById('myInput').value = 'hello'; - ❌ 错误：
el.innerHTML = 'hello';（<input>没有子内容） - ❌ 错误：
el.setAttribute('value', 'hello');（只改 attribute，不更新当前 value）
textarea 和 input 写法一致但注意换行处理
<textarea></textarea> 的初始内容写在标签体内，但 JS 设置时同样走 value 属性，和 <input> 完全一样。唯一差异是：如果字符串含换行符（n），<textarea></textarea> 会原样显示，而 <input> 会把换行截断或转为空格。
所以往 <textarea></textarea> 填多行文本时，确保字符串本身含 n，不用额外转义：
立即学习 “ 前端免费学习笔记（深入）”；
document.querySelector('textarea').value = '第一行 n 第二行';若从服务端取回的文本换行被 HTML 实体化（如 ），得先还原：str.replace(/ /g, 'n')。
动态插入后立即赋值要等 DOM 就绪
如果文本框是 JS 动态创建并 appendChild 进去的，必须等它真正挂载到文档中再设 value。否则操作的是游离节点，页面上看不见效果。
- ✅ 创建后立刻赋值（只要已 append）：
const el = document.createElement('input'); el.type = 'text'; document.body.appendChild(el); el.value = 'ok'; - ⚠️ Vue/React 等框架里，别在
mounted或useEffect之前操作 DOM 节点，时机不对就白设 - ⚠️ 使用
innerHTML += '……<input>……'后，不能直接querySelector刚插入的元素——部分浏览器会延迟解析，建议用insertAdjacentHTML或加个微任务：Promise.resolve().then(() => el.value = '……')
表单重置时 value 属性会被忽略
如果页面有 <form></form> 且用户点了 <input type="reset">，所有字段会恢复成 HTML 中写的 value 属性值（即初始 attribute），而不是 JS 后设的 value 属性值。
也就是说：<input id="a" value="default">，JS 改成 'user input'，点重置后变回 'default'，不是空或上次 JS 值。
- 想让重置回到 JS 设的值？得手动拦截
reset事件，或改用defaultValue属性（仅读）配合逻辑重置 - 更稳妥的做法：重置逻辑全由 JS 控制，禁用原生
type="reset"，改用按钮 +el.value = savedValue
有些场景下“初始值”其实隐含了用户交互预期，比如带 placeholder 的搜索框、编辑态回填，这时候光设 value 不够，还得检查是否聚焦、是否清空过、是否触发过验证——这些都得单独处理，不在 value 赋值这一步里。
