Как клонировать элементы на jQuery

8:54 14.06.2017
В этом сообщении расскажу, как можно клонировать элементы HTML документа на jQuery. Для примера будем копировать блок с классом child. Клонировать будем функцией clone, данный метод создает копию указанного элемента или элементов и возвращает их в виде объектов. Содержимое клонируемых элементов, копируется вместе с элементами.

Количество копий зависит от количество клонируемых элементов, то есть если документ содержит всего один элемент, который надо клонировать, то будет создана одна копия, если клонируемых элементов два, то буде создано две копии и так далее. Это конечно если выбрано всего одно место, куда будет вставлены копии.

Приведу весь код примера:
<button id="button">Копировать</button>
<div class="parent">
    <div class="child">Копируемый блок</div>
</div>

<script type="text/javascript">
$('#button').click(function() {
    var element = $('.child').clone();
    element.appendTo('.parent');
});
</script>

После нажатия на кнопку "Копировать", срабатывает метод click, клонируется все элементы с классом child, методом clone и вставляется в конец блока с классом parent. За вставку элемента в конец блока, отвечает метод appendTo.

Необходимо подключить jQuery.