当特定元素上的某些文本出现时，如何触发函数？答案

【问题标题】：How can I trigger a function when certain text on a specific element appears?当特定元素上的某些文本出现时，如何触发函数？
【发布时间】：2021-11-30 08:41:29
【问题描述】：

当网页上出现特定文本时，我需要向网页添加一些代码。

所以我加载了一个网页，然后出现了：

<div id="someid" class="someclass" style=""></div>

我不想发生任何事情。但在某些时候会出现这种情况：

<div id="someid" class="someclass" style="">Some text here...</div>

当文本出现时，我希望 Greasemonkey 将其添加到页面的某个位置。

<div id="idbla">This is text...</div>

我不在乎这是在哪里添加的。它不需要附加到任何东西。它甚至不需要在页面上可见。我只是希望它出现在网页的 HTML 中。

【问题讨论】：

标签： javascript html greasemonkey

【解决方案1】：

使用MutationObserver 检测元素的文本更改：

function main() {
  console.log('Text added!');
}

const wantedDiv = document.querySelector('#someid');
const button = document.querySelector('#add-text');
button.addEventListener('click', () => wantedDiv.innerText = 'text...');

const observer = new MutationObserver(() => {
  if (wantedDiv.innerText) main();
  observer.disconnect();
});
const config = {
  characterData: false,
  attributes: false,
  childList: true,
  subtree: false
};

observer.observe(wantedDiv, config);

<div id="someid" class="someclass" style=""></div>

<button id="add-text">Add text</button>

【讨论】：