jquery wrap elements with div
<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>
