title: Fire a function when innerHTML of element changes?
body: <p>I want to fire a function when the innerHTML of a <code>div</code> element changes.</p>
  
  <p>Been testing with <code>element.addEventListener('DOMCharacterDataModified', myFunction());</code> but it does not seem to work properly. It fires once when the page is loaded but never again after? See example code below. </p>
  
  <p>Anyone have a solution to my task? Any help is greatly appreciated!</p>
  
  <p><strong>The task:</strong></p>
  
  <ol>
  <li>I have an empty <code>div</code>.</li>
  <li>At random it will be fed with data from an external source (that I do not have control of).</li>
  <li>Everytime when the innerHTML changes, I want to fire <code>myFunction()</code>.</li>
  </ol>
  
  <hr>
  
  <p><strong>My current example code:</strong></p>
  
  <pre><code>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);
  </code></pre>
  
  <p><em>The <code>setTimeout</code>s visualize the data feeding from an external source.</em></p>
  
  <p>If possible it needs to be JS only, but jQuery could be used if <em>really</em> needed.</p>
  
  <hr>
  
  <p>Thanks in advance!</p>
  
  <p>// wirrew</p>