HTML 当元素的innerHTML发生变化时触发函数

当元素的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

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。