Клонирование элемента и добавление его в другой элемент

Question

Рассмотрим следующую разметку HTML:

<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>

И 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;

});

Почему это не работает? console.log() находит эти элементы ...

Что я хочу сделать, так это то, что когда кнопка нажата, она клонирует элемент subtitle и добавляет его в элемент more_subtitles. И пользователь может повторить это снова и снова.

Answer 1

more_subtitles.append(subtitle.clone());

Answer 2

Добавить не тот метод, который вы хотите.Вместо этого попробуйте добавить.

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

Добавить используется, чтобы расширить текущие сопоставленные элементы новым набором элементов в соответствии с селектором, который вы передали в add.Это не влияет на DOM.

Append - это метод, который фактически добавляет подходящие элементы DOM к текущему элементу DOM.