title: How to detect, when content of an element changes
body: <p>I am looking for a way to watch for dynamically populated (no page reload) content inside an element so that I can add a class to another element.</p>
  
  <p>I have this so far:</p>
  
  HTML
  
  <pre><code>&lt;div class="message-container"&gt;
    &lt;div class="messages error"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="messages success"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="messages warning"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="messages warning"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="myDiv"&gt;...&lt;/div&gt;
  </code></pre>
  
  JS
  
  <pre><code>$(document).ready(function() {
    if($.trim($("div.messages.success span").html()) != '') {
      $('.myDiv').addClass('.with-message');
    }
  });
  </code></pre>
  
  <p>How can I have <code>myDiv</code> to have the <code>with-message</code> class when any message <code>span</code> is populated? </p>
  
  <p>Note it ay be populated on the fly without reloading, or exist when landing on the page, or be populated with a reload.</p>