Question

I have a styled element with the class ‘item’ that is hidden. Initially the page will only have one element with this class. I am simply using this hidden element as a model, that I can grab with jquery and insert it into a list every time the ‘add item’ button is clicked, with the correct item name in the inner text.

What I am trying to do is clone this hidden ‘item’ element and insert it right after where the last item element is located on the webpage. Show it, and change the inner text to whatever I need.

My current implementation does not clone / insert items as expected, though I believe it should, I am probably missing something.

My Markup

<div class="item" style="border:1px solid blue; padding:7px; display:none;">hello</div>

add item

My JavaScript

$(".addItem").click(function(){

   //clone hidden item element blueprint
   $('.item').eq(0).clone().insertAfter('.item:last-child');


   //Change inner text of element
   $('.item:last-child').text("apples").show();
});

JSFiddle

http://jsfiddle.net/XPVAs/

Answer 1

Suppose you need :last selector, instead of :last-child:

$(".addItem").click(function(){

    //clone hidden item element blueprint
    $('.item').eq(0).clone().insertAfter('.item:last');


    //Change inner text of element
    $('.item:last').text("apples").show();
});

And here is a demo: http://jsfiddle.net/XPVAs/3/