Question

How do I clone and append anchor html value of a list with multiple <a href="#">Barbara is so nice</a> elements to a div container. I am able to clone the .counter element and append it to the container but wont work with a anchor.

I created a jsFidle here

Here is my js code:

$(window).load(function(){
    $('.ordered-list li a').on("click", function() {
        var button = $(this);
        $('.overlay').fadeIn('slow',function(){
            button.find('.user-comment-list').clone().fadeIn(1000).appendTo('.overlay-content-inner');
            button.find('.counter').clone().appendTo('.overlay-title-content');
    });
});
    $('.icon-remove').click(function(){
        $('.overlay').fadeOut('slow');
        $('.overlay-content-inner, .overlay-title-content').empty();
    });
});

Answer 1

I’m not sure why you can’t get the anchor value out. You are already in the anchor.

$('.ordered-list li a').on("click", function() {

You are binding the click event to the anchor. It only adds to the confusion that you name the local variable referencing the current anchor button.

Instead of:

button.find('.counter').clone().appendTo('.overlay-title-content');

You can do the following if you want to append the anchor HTML instead:

$('.overlay-title-content').append(button.html());

DEMO – Appending the anchor HTML value

In case the link to the DEMO goes stale, here is the new code:

$('.ordered-list li a').on("click", function() {
    var button = $(this); // not a button! "this" is referencing the clicked anchor.
    $('.overlay').fadeIn('slow', function() {
        button.find('.user-comment-list').clone().fadeIn(1000).appendTo('.overlay-content-inner');
        $('.overlay-title-content').append(button.html());
        //button.find('.counter').clone().appendTo('.overlay-title-content');
    });
});
$('.icon-remove').click(function() {
    $('.overlay').fadeOut('slow');
    $('.overlay-content-inner, .overlay-title-content').empty();
});​

Hope this helps.