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

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2031
Поблагодарили: 62 раза

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

Сообщение Slash » Вс июн 12, 2016 10:42 pm

Доброго времени суток!
В этом сообщении расскажу, как можно клонировать элементы 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 (Как подключить библиотеку jQuery).
Реклама

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость