Cloning element and adding it in another element

Question

Consider following HTML markup:

<form action="">
    <div class="row subtitle">
        <span>Some stuff.</span>
    </div>

    <div class="more_subtitles"></div>


<a href="#" class="white add_more"><span>Add more</span></a>
</form>

And jQuery:

$('.add_more').live('click', function() {

    var el_of_form, subtitle, more_subtitles;

    el_of_form = $(this).closest('form');

    subtitle       = $(el_of_form).find('.subtitle');
    more_subtitles = $(el_of_form).find('.more_subtitles');

    console.log(subtitle);
    console.log(more_subtitles);

    $(more_subtitles).add(subtitle);

    return false;

});

Why isn't it working? console.log() finds those elements...

What I want to accomplish is that when button is presses, it clones subtitle element and add it in more_subtitles element. And user can repeat it again and again.

Answer 1

Add is not the method you want. Try append instead.

$(more_subtitles).append(subtitle.clone());

Add is used to extend the current matched elements with a new set of elements as matched by the selector you passed into add. It does not affect the DOM.

Append is the method that actually will add matched DOM elements to the current DOM element.

Answer 2

more_subtitles.append(subtitle.clone());