当元素的innerHTML更改时触发功能？ [英] Fire a function when innerHTML of element changes?

问题描述

当 div 元素的innerHTML更改时，我想触发一个函数。

I want to fire a function when the innerHTML of a div element changes.

使用 element.addEventListener（'DOMCharacterDataModified'，myFunction（））; ，但它似乎无法正常工作。页面加载后会触发一次，但之后不会触发？请参见下面的示例代码。

Been testing with element.addEventListener('DOMCharacterDataModified', myFunction()); but it does not seem to work properly. It fires once when the page is loaded but never again after? See example code below.

有人对我的任务有解决方案吗？

Anyone have a solution to my task? Any help is greatly appreciated!

任务：

1. 我有一个空的 div 。


2. 随机会从外部源获取数据（我不会


3. 每次当innerHTML更改时，我都会触发 myFunction（）。

1. I have an empty div.
2. At random it will be fed with data from an external source (that I do not have control of).
3. Everytime when the innerHTML changes, I want to fire myFunction().

---

我当前的示例代码：

var element = document.getElementById('div');

element.addEventListener('DOMCharacterDataModified', myFunction());

function myFunction() {
    console.log(element.innerHTML);
}

setTimeout(function(){
    element.innerHTML = 'Hello World!';
}, 1000);

setTimeout(function(){
    element.innerHTML = 'Hello Space!';
}, 2000);

setTimeout 显示

如果可能的话，它只需要使用JS，但是如果需要真的，则可以使用jQuery。

If possible it needs to be JS only, but jQuery could be used if really needed.

谢谢！

//螺丝

推荐答案

使用 DOMSubtreeModified 事件：

var element = document.getElementById('div');

element.addEventListener('DOMSubtreeModified', myFunction);

function myFunction(e) {
    console.log(element.innerHTML);
}

setTimeout(function(){
    element.innerHTML = 'Hello World!';
}, 1000);

setTimeout(function(){
    element.innerHTML = 'Hello Space!';
}, 2000);

<div id="div"></div>

BTW，DOM突变事件已已弃用。使用 MutationObserver ：

BTW, DOM mutation events were deprecated. Use MutationObserver:

window.addEventListener('load', function () {
  var element = document.getElementById('div');

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var observer = new MutationObserver(myFunction);
  observer.observe(element, {
	  childList: true
  });

  function myFunction() {
    console.log(element);
    console.log(element.innerHTML);
  }

  setTimeout(function(){
    element.innerHTML = 'Hello World!';
  }, 1000);

  setTimeout(function(){
    element.innerHTML = 'Hello Space!';
  }, 2000);
});

<div id="div">

GitHub上的原始代码段

这篇关于当元素的innerHTML更改时触发功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！