Создание нового блока при клике на другой блок

Question

Создание нового блока при клике на другой блок

Ден Але Ученик (60), на голосовании 1 год назад

Всем привет! Такая проблема, есть код:
<div class="cont_color_good">
<div class="block_color_good" id="col_bl_1">
<div>Цвет 1</div>
</div>
<div class="block_color_good_add">
<div><i class="icon-plus menu-icon"></i>Новый</div>
</div>
</div>

Подскажите пожалуйста, как при клике на блок с class block_color_good_add добавлять новый блок после уже имеющегося блока block_color_good (точно такой же как и block_color_good). При этом надо, что бы id параметр прибавлялся, у каждого был свой (col_bl_1, col_bl_2, col_bl_3 и т. д.)
За ранее спасибо!

Answer 1

Саня Семенов Оракул (60497) 1 год назад

codepen.io/norbert123/pen/yLxPJeV

Answer 2

я бы клонировал блок id="col_bl_1", а потом менял бы id с получением номера через querySelectorAll('block_color_good').length + 1
дальше вставка, в требуемое место...

Answer 3

При помощи cloneNode(). Это позволит создать точную копию со всеми классами и т.п.

 const good = document.querySelector('.cont_color_good');
const add = document.querySelector('.block_color_good_add');

add.addEventListener('click', ({target}) => {
   target.append(good.cloneNode());
})