title: jquery wrap elements with div
body: <p>Gurus,</p>
  
  <p>I have this.</p>
  
  <pre><code>&lt;td style="width:100px"&gt;
  Queued:465
  Rejects:3897
  Offers:31
  &lt;/td&gt;
  </code></pre>
  
  <p>and need to make it as </p>
  
  <pre><code>&lt;td style="width:100px"&gt;
  &lt;span class="label"&gt;Queued:&lt;/span&gt;&lt;span class="data"&gt;465&lt;/span&gt; &lt;br&gt;
  &lt;span class="label"&gt;Rejects:&lt;/span&gt;&lt;span class="data"&gt;3897&lt;/span&gt;&lt;br&gt;
  &lt;span class="label"&gt;Offers:&lt;/span&gt;&lt;span class="data"&gt;31&lt;/span&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Instead of one single line (Queued:465 Rejects:3897 Offers:31), I want to give a break after the numbers(they are dynamic). Queued, Rejects, Offers are fixed.</p>
  
  <p>This is what I tried with.</p>
  
  <pre><code>$('td:contains(Queued:)').html(function() {
      return $(this).html().replace('Queued:', '&lt;span class="label"&gt;Queued: &lt;/span&gt;');
  });
  $('td:contains(Rejects:)').html(function() {
      return $(this).html().replace('Rejects:', '&lt;br&gt;&lt;span class="label"&gt;Rejects: &lt;/span&gt;');
  });
  $('td:contains(Offers:)').html(function() {
      return $(this).html().replace('Offers:', '&lt;br&gt;&lt;span class="label"&gt;Offers: &lt;/span&gt;');
  });
  </code></pre>