如何使用JavaScript为textarea文本域填充指定内容？

无效原因与解决方案 #

你使用value属性赋值本身是textarea的标准操作，没生效大概率是以下几个原因，对应修复即可：

• 执行时机错误：代码在textarea元素渲染到页面前就执行了，导致getElementById拿到空值，没有赋值目标。可以将代码用DOMContentLoaded事件包裹，确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', () => {
  const targetTextarea = document.getElementById('domains')
  // 先判断元素是否存在，避免报错
  if (targetTextarea) {
    targetTextarea.value = 'TESTING'
    // 如果站点用了Vue/React等前端框架，需要额外触发input事件让框架感知到值变更
    targetTextarea.dispatchEvent(new Event('input', { bubbles: true }))
  }
})

• 用法错误：不要用innerHTML给textarea赋值，该属性是用来修改DOM节点内部的HTML内容的，textarea作为表单元素，值的修改标准属性是value，用innerHTML会出现兼容问题，无法保证生效。
• 上下文错误：如果你是在浏览器插件、油猴脚本中运行代码，content.document只在特定的插件上下文生效，普通页面上下文直接调用会报错，统一用当前页面的document即可，同时要把脚本的运行时机设置为页面加载完成后执行。
• 元素定位错误：可以打开浏览器控制台F12，执行console.log(document.getElementById('domains'))，看输出是否为你要修改的textarea，如果输出为null，要么页面存在多个相同id的元素，要么你要修改的textarea在iframe内部，需要先获取iframe的document对象再查找元素。

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