title: ajax response does not write to html page what to do?
body: <p>languages used: html, javascript/jquery, and php 5.2</p>
  
  <p>So I created this function that onclick creates a "group". For simplicity, we'll say this is a group (aka the response from ajax.):</p>
  
  <pre><code>&lt;div id="group1"&gt;Group #1&lt;/div&gt;
  </code></pre>
  
  <p>This is where the groups go: (html page)</p>
  
  <pre><code>&lt;div id="groups"&gt;
      &lt;!-- groups go here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the user creates group #1. No problem. The response is returned and Group 1 appears on the screen where it should.</p>
  
  <p>The problem I run into is when the user creates group #2.</p>
  
  <pre><code>success:function(data){
                      $('#groups').prepend().html($.trim(data));
                  }
  </code></pre>
  
  <p>The above script is what assigns the new group to the div. The trouble is, instead of prepend group2 before group1, group2 replaces group1. (not good) </p>
  
  <p>I'm not exactly sure what is happening but when the user creates a 2nd group the script looks for a child element of group to prepend the script finds none so it replaces group1.</p>
  
  <p>If I go to view source I do not see the div for group1 or two but I can visually see the response on my screen.</p>
  
  <p>What is going on here and how do i fix it? </p>
  
  <p>Thanks!</p>