当元素的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发生变化时，会在控制台输出相应的信息。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/476284.html
微信扫一扫