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

Question

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

所以我加载了一个网页，这会出现：

<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 的某处。

Answer 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>