主页 / 问题 / 693116
Accepted
Yuri
Asked:2020-07-17 15:53:52 +0000 UTC2020-07-17 15:53:52 +0000 UTC

捕捉 div 内容变化

  • 772

我有一个 div，其内容可以通过多种方式更改：例如，可以通过 innerHTML 更改其所有内容，或者可以通过 DOM 方法添加节点。这可以通过本机 javascript、jQuery API 调用或其他库来实现。

我想在 div 的内容发生变化时执行一些代码，但我完全无法控制它何时发生变化。事实上，我正在开发一个可供其他人使用的插件，他们可以根据自己的喜好自由更改其 div 的内容。当这个 div 的内部内容发生变化时，插件的表单也可以更新。

我正在使用 jQuery。有没有办法捕捉 div 内容的变化？

javascript

2 个回答

  1. Best Answer

    MutationObserver（支持）

    const observer = new MutationObserver(mutations => console.log(mutations));
observer.observe(test, { 
  attributes: true, 
  childList: true,      
  characterData: true,
  subtree: true
});

test.innerHTML = '1';
test.classList.add('test');
test.appendChild(document.createElement('br'));
test.innerHTML += '2';
    <div id='test'></div>

    • 8

  2. 您可以使用DOMNodeInserted和DOMNodeRemoved检查项目是否已添加或删除。不幸的是 IE 不支持这个。

    $('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
});

    您可以使用 保存原始内容和未来的更改.data()。这是一个例子。

    var div_eTypes = [],
    div_changes = [];
$(function() {
    $('#myDiv').each(function() {
        this['data-initialContents'] = this.innerHTML;
    }).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
        div_eTypes.concat(e.type.match(/insert|remove/));
        div_changes.concat(this.innerHTML);
    });
});

    输出示例：

    > $('#myDiv').data('initialContents');
"<h1>Привет мир!</h1><p>Это пример.</p>"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"]

    如果元素被替换为 ，您可能希望包含DOMSubtreeModified、DOMNodeInserted和不会被触发。它在 IE 中不起作用，但至少在其他浏览器中可以正常工作。DOMNodeRemovedinnerHTML

    • 3

相关问题