当元素的innerHTML发生变化时触发函数,可以使用JavaScript的事件监听器来实现,具体步骤如下:
(图片来源网络,侵删)1、获取需要监听的元素
2、为元素添加DOMContentLoaded
事件监听器
3、在事件处理函数中,使用MutationObserver
来监听元素的变化
4、当元素发生变化时,执行相应的操作
下面是详细的代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>当元素的innerHTML发生变化时触发函数</title> </head> <body> <div id="target">这是一个需要监听的元素</div> <button onclick="changeInnerHTML()">改变innerHTML</button> <script> // 获取需要监听的元素 const targetElement = document.getElementById('target'); // 为元素添加DOMContentLoaded事件监听器 document.addEventListener('DOMContentLoaded', () => { // 使用MutationObserver来监听元素的变化 const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'childList') { console.log('子节点发生了变化'); } else if (mutation.type === 'attributes') { console.log('属性发生了变化'); } else if (mutation.type === 'characterData') { console.log('文本内容发生了变化'); } } }); // 配置观察器选项 const config = { childList: true, attributes: true, characterData: true }; // 开始观察目标元素 observer.observe(targetElement, config); }); // 改变innerHTML的函数 function changeInnerHTML() { targetElement.innerHTML = 'innerHTML已经发生了变化'; } </script> </body> </html>
在这个示例中,我们创建了一个div
元素和一个按钮,当点击按钮时,会调用changeInnerHTML
函数,改变div
元素的innerHTML
,我们使用MutationObserver
来监听div
元素的变化,当innerHTML
发生变化时,会在控制台输出相应的信息。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。