How to dynamically clone text from element?
<p>I am using a system that generates a shopping cart summary in a table with little room to customise. What I would like to do is when the shopping cart is 'empty' display '0'</p>

<p>When it has a quantity in it, display that number.</p>

<p>This is the generated HTML which I have <strong>hidden</strong>:</p>

<pre><code>&lt;span vertical="False" quote="False" id="catCartSummary"&gt;
   &lt;table cellspacing="0" class="cartSummaryTable"&gt;
     &lt;tbody&gt;
       &lt;tr&gt;
         &lt;td class="cartSummaryItem"&gt;3 item(s), Total: $115.00 &lt;a href="/OrderRetrievev2.aspx?CatalogueID=0" class="cartSummaryLink"&gt;View Cart&lt;/a&gt;&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
   &lt;/table&gt;
&lt;/span&gt;
</code></pre>

<p>As you can see it currently has "3 item(s)".</p>

<p>This is what is looks like empty:</p>

<pre><code>&lt;span vertical="False" quote="False" id="catCartSummary"&gt;
   &lt;table cellspacing="0" class="cartSummaryTable"&gt;
     &lt;tbody&gt;
       &lt;tr&gt;
         &lt;td class="cartSummaryItem"&gt;Shopping cart is empty.&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
   &lt;/table&gt;
&lt;/span&gt;
</code></pre>

<p>Now I have some simple HTML setup here:</p>

<pre><code>&lt;div class="cartsummary"&gt;
  &lt;div class="cartitems"&gt;Shopping Cart &lt;a href="#"&gt;&lt;span class="cartTotal"&gt;&lt;/span&gt; Item(s)&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Using jQuery I'd like to then take the quantity and add it to .cartTotal and if there's nothing in the cart just show 0.</p>

<p>This sort of works but if I add a new item to the cart it only updates the value when the page is refreshed, whereas the auto generated updates dynamically.</p>

<pre><code>if (jQuery('#catCartSummary .cartSummaryItem').html() != 'Shopping cart is empty.') {
   var summary = jQuery('#catCartSummary .cartSummaryItem').text().split(" ");
   var total = summary[0];
   jQuery('span.cartTotal').html(total);
}else{
   jQuery('span.cartTotal').html("0");
}
</code></pre>

<p>Few extra's worth noting:</p>

<ol>
<li>It would be great to be able to have 0 'Items', 1 "item", 2 "items". Rather than always "Item(s)"</li>
<li>It would be also great to separately display the total cost in another span. Perhaps .cartAmount.</li>
</ol>
