0

I like to append an li into an existing ul like here: jQuery: how to add <li> in an existing <ul>?

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

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

into the cart.html:

 <div id="inner-cart-content">
        <ul id="content-cart">
            <li>
               //The new li element from products.html

in the JavaScript I wrote this:

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

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

So what do I have to do?

Community
  • 1
  • 1
Jules
  • 3,105
  • 2
  • 27
  • 33
  • In your commented line, you do `$("#inner-merke-content ul")` but your UL id is "inner-**cart**-content". Besides, how is shown the page "products.html" ? In an iframe ? Loaded via ajax ? – Didier Ghys Feb 08 '12 at 09:25
  • oh sorry I edited this mistake :) it's not an iframe - just a normal html file - for the first time I wanted to realize an prototype without content load by ajax - so the li elements are hard coded content – Jules Feb 08 '12 at 09:32
  • If the cart, where you want to put in the items, is not displayed on the same site as the products, then you will need an other solution. – Jannis M Feb 08 '12 at 09:42
  • 1
    Is is also a typo to do `.append('cart')` ? You should remove the the quotes, otherwise you are passing a string to the method and not the variable `cart`. – Didier Ghys Feb 08 '12 at 09:42
  • actually I'm not sure what to do know... to get the solution do I have to use data from ajax load? – Jules Feb 13 '12 at 13:12

1 Answers1

0
$(".btn-cart").click(function(){
 var item = //grab what you want

 $("#content-cart ul").append(item);
 $("<div id="inner-cart-content">").show(); //After adding the item, show the cart
 $("div").delay(4000).hide(); And after 4 seconds hide it again!
});
Jannis M
  • 745
  • 1
  • 4
  • 15