append li into an existing ul inside another html file
<p>I like to append an li into an existing ul like here: <a href="http://stackoverflow.com/questions/1145208/jquery-how-to-add-li-in-an-existing-ul">jQuery: how to add &lt;li&gt; in an existing &lt;ul&gt;?</a></p>

<p>But in my code the li is an existing li from another html file.
So 'm having the products.html with an ul. In this html file I like to append the li</p>

<pre><code>&lt;li class="first-li" id="hotel_belle"&gt;
     &lt;h2&gt;Hotel Belle&lt;/h2&gt;
     &lt;div&gt;
        &lt;img class="sub-img" alt="picture from hotel" src="pic/products/HotelBelle.png" /&gt;
        &lt;p&gt;Lorem Ipsum&lt;/p&gt;
        &lt;a href="#"&gt;&lt;img class="btn-cart" alt="add this product to cart" src="pic/book/cart.png" /&gt;&lt;/a&gt;
     &lt;/div&gt;    
 &lt;/li&gt;
</code></pre>

<p>into the cart.html:</p>

<pre><code> &lt;div id="inner-cart-content"&gt;
        &lt;ul id="content-cart"&gt;
            &lt;li&gt;
               //The new li element from products.html
</code></pre>

<p>in the JavaScript I wrote this:</p>

<pre><code>$(".btn-cart").click(function(){  
var cart = $(this).parents("li").eq(0);

//$("#inner-cart-content ul").append('cart'); &lt;--this is not working
});
</code></pre>

<p>So what do I have to do?</p>
