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

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

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

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

Есть блок с содержимым (форма), как по клику добавить аналогичный блок с содержимым? То есть по клику на "Добавить +", добавляется блок #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()

Новые блоги и статьи Все статьи Все блоги /
Линейное решение нелинейной задачи. Выведение формул LM (сам тоже могу, но хочу проверить LM) Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. Assistant qwen2. 5-14b-instruct . Сначала изображение (переделаю в лучший вид когда проверю что мне написала языковая модель). . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .	Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .
Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .	Реализации таймеров в Unity GameUnited 09.04.2025 Время — важный ресурс любой игры. Разработка качественных игровых механик невозможна без грамотного управления временем, а таймеры выступают ключевым инструментом этого управления. Представьте себе. . .	Функции высшего порядка в JavaScript run.dev 09.04.2025 Функции высшего порядка представляют собой один из фундаментальных камней функционального программирования в JavaScript. По сути, это функции, которые либо принимают другие функции в качестве. . .

@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: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> 0

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

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	01.02.2016, 14:14
	Сообщение от Compaq как сделать задержку delay() при клонировании элемента? Не совсем понимаю вашу задачу, но метод delay() работает для анимации. Вам же, скорее всего, нужен setTimeout() 1

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

Решение