如何在Tampermonkey脚本中使用原生JS向div插入HTML

云原生阿岚

2026-10-11

问题原因及解决方案

核心错误点

document.getElementsByClassName()返回的是类数组的HTMLCollection集合，不是单个DOM元素，直接访问innerHTML属性无效，必须指定索引获取对应元素，比如document.getElementsByClassName("className")[0]，更推荐使用document.querySelector('.className')直接获取第一个匹配的元素。
很多站点的内容是异步动态渲染的（比如SPA页面、接口返回后渲染的模块），DOMContentLoaded触发时目标元素可能还没有被插入到DOM树中，自然无法完成内容插入。

可直接使用的原生JS方案

适配Tampermonkey场景，会自动等待目标元素出现后再执行插入逻辑：

// 要插入的HTML内容
const insertHtml = `<button>hi</button>`;
// 目标元素选择器，替换为你实际的类名
const targetSelector = '.className';

// 监听DOM变化，等待目标元素出现
const observer = new MutationObserver((mutations, obs) => {
  const targetEl = document.querySelector(targetSelector);
  if (targetEl) {
    // 找到元素后停止监听
    obs.disconnect();
    // 插入HTML
    targetEl.innerHTML += insertHtml;
  }
});

// 监听整个document的节点变化
observer.observe(document, {
  childList: true,
  subtree: true
});