title: Change div content dynamically with jQuery
body: <p>I'm wondering how I can change the html content of a div.</p>
  
  <p>This is the starting point:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="fruits"&gt;apple&lt;/div&gt;
      &lt;div class="fruits"&gt;banana&lt;/div&gt;
      &lt;div class="fruits"&gt;strawberry&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Output on page:</p>
  
  <p>apple<br>
  banana<br>
  strawberry</p>
  
  <p>The output should be changed to:</p>
  
  <p>cat<br>
  dog<br>
  fish<br>
  ...or something like this.</p>
  
  <p>I guess I have to iterate over the class "fruits" with .each() or something.
  I know how to change single elements or content of a single div, but i don't understand how that works when you have the same class for multiple times.</p>
  
  <p>class="fruits"<br>
  class="fruits"<br>
  class="fruits"<br>
  ....</p>
  
  <p>Hope you can help.</p>