云主机测评网云主机测评网云主机测评网

云主机测评网
www.yunzhuji.net

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发生变化时,会在控制台输出相应的信息。

打赏
版权声明:主机测评不销售、不代购、不提供任何支持,仅分享信息/测评(有时效性),自行辨别,请遵纪守法文明上网。
文章名称:《HTML 当元素的innerHTML发生变化时触发函数》
文章链接:https://www.yunzhuji.net/jishujiaocheng/45709.html

评论

  • 验证码