По клику добавить блок с содержимым

@Compaq · Регистрация: 14.02.2013

Студворк — интернет-сервис помощи студентам

Добрый день, Форумчане

Есть блок с содержимым (форма), как по клику добавить аналогичный блок с содержимым? То есть по клику на "Добавить +", добавляется блок #some с аналогичным содержимым.

Блок вида

HTML5
1
2
3
4
5
6
7
8
9
<div id="block">
    <form>
        <div id="some">
            <input type="text" name="fistname"/>
            <input type="text" name="lastname"/>
        </div>
        <div id="add">Добавить +</div>
    </form>
</div>

С уважением

@Lazy_Den · 30.01.2016, 12:01

Compaq, для начала, заменить все id в этом блоке на классы. Смотрим пример

JavaScript
1
2
3
4
$(document).on('click', '.add', function(){
    var block = $(this).closest('.block');
    block.clone().insertAfter(block);
});

@Compaq · 30.01.2016, 12:05 **[ТС]**

Спасибо,

А не подскажите, как клонировать элемент с изменением. Добавлять текст <p>Title 1</p>, <p>Title 2</p> по клику?

@Lazy_Den · 30.01.2016, 12:10

Compaq, куда именно добавлять? И будет ли присутствовать этот элемент в первом исходном блоке?

@Compaq · 30.01.2016, 12:16 **[ТС]**

Ну допустим блок вида

Сообщение от Compaq

div id="block">
* * <form>
* * * * <div id="some">
<p>Title</p>
* * * * * * <input type="text" name="fistname"/>
* * * * * * <input type="text" name="lastname"/>
* * * * </div>
* * * * <div id="add">Добавить +</div>
* * </form>
</div>

После клонирования блока, сделать <p>Title 1</p>

@Lazy_Den · 30.01.2016, 12:23

Compaq, проверяем

JavaScript
1
2
3
4
5
6
7
8
var block = $('.block'),
  tn = 1;
$(document).on('click', '.add', function() {
  block.clone()
    .insertAfter('.block:last')
    .find('.some')
    .prepend('<p>Title ' + (tn++) + '</p>');
});

@Compaq · 30.01.2016, 12:56 **[ТС]**

Спасибо, выручили. Можно последний вопрос по этой теме. А как клонировать блоки, без содержимого? Допустим просто копия блока (some) со всеми inputами, но без введенной информации?

@Lazy_Den · 30.01.2016, 13:26

Сообщение от Compaq

как клонировать блоки, без содержимого

Просто очищать форму после добавления на страницу

JavaScript
1
2
3
4
5
6
7
/* ... */
block.clone()
    .insertAfter('.block:last')
    .find('.some')
    .prepend('<p>Title ' + (tn++) + '</p>')
    .closest('form')[0].reset();
/* ... */

@Compaq · 01.02.2016, 02:25 **[ТС]**

Блин, проблема.

Она клонирует формы, а у меня по задумке одна форма, в которой разные формы.

Пример тут, так как форма одна, не получается ее очистить https://jsfiddle.net

Добавлено через 27 минут
Решил задав

JavaScript
1
.insertBefore(this).find("input[type=text], textarea").val("");

Добавлено через 20 часов 46 минут
Доброе утро, ночи

Не подскажите, как сделать задержку delay() при клонировании элемента?

@Lazy_Den · 01.02.2016, 14:14

Сообщение от Compaq

как сделать задержку delay() при клонировании элемента?

Не совсем понимаю вашу задачу, но метод delay() работает для анимации. Вам же, скорее всего, нужен setTimeout()

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Compaq 2 / 2 / 0 Регистрация: 14.02.2013 Сообщений: 218
	30.01.2016, 12:05 [ТС]
	Спасибо, А не подскажите, как клонировать элемент с изменением. Добавлять текст <p>Title 1</p>, <p>Title 2</p> по клику? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	30.01.2016, 12:10
	Compaq, куда именно добавлять? И будет ли присутствовать этот элемент в первом исходном блоке? 0

@Compaq 2 / 2 / 0 Регистрация: 14.02.2013 Сообщений: 218
	30.01.2016, 12:56 [ТС]
	Спасибо, выручили. Можно последний вопрос по этой теме. А как клонировать блоки, без содержимого? Допустим просто копия блока (some) со всеми inputами, но без введенной информации? 0

По клику добавить блок с содержимым

Решение