Функция clone() в библиотеке jQuery создаёт точные копии DOM-элементов. Это полезно для динамического добавления элементов на страницу без повторного написания кода.
Создание и добавление клона
Создадим простой блок:
<div id="myBlock">
<p>Абзац</p>
</div>Клонируем его с помощью jQuery и добавим на страницу:
let clonedBlock = $('#myBlock').clone();
$('body').append(clonedBlock);Первая строка создаёт копию элемента с id myBlock, вторая добавляет её в конец элемента <body>. Для добавления в другой элемент, например, в div с id «container», используйте: $(‘#container’).append(clonedBlock); append() добавляет элементы после существующих.
Изменение клона
Изменим содержимое и стили клона, не затрагивая оригинал:
clonedBlock.append('<p>Новый абзац</p>');
clonedBlock.css({
'font-size': '40px',
'width': '200px',
'background-color': 'lightgray'
});Это изменит только клон.
Практическое применение
Пример: веб-портал с добавлением ссылок. Пользователь добавляет ссылку, нажимает «Сохранить», и нужно добавить ещё одно поле. Вместо создания нового поля, можно клонировать существующее.
Функция clone() jQuery — простой и эффективный способ создания копий DOM-элементов. Она упрощает разработку динамических веб-страниц и повышает производительность кода. Полезно при создании форм с добавлением полей и в других случаях динамического создания элементов.