Как добавить больше элементов при клике?

Question

[Genri_Rus]

Никак не могу понять, почему у меня не добавляется больше одного элемента в модальное окно, когда я кликаю на кнопку "Переместить"?

Вот пример: https://codepen.io/Genri_Rus/pen/eajaQo

const icon = $('.icon-right');
const modal = $('.modal');

$('.move').click(function() {
    let imgCat = $(this).parent().find('img').attr('src');
  
    modal.addClass('modal-open').text('Каталог');
    let modalCat = '<div class="modal-item"><img src="' + imgCat + '"></div>';
    $(modal).append(modalCat);
    setTimeout(function() {
      $('.modal-item').addClass('show-item');
    }, 80);
})

Answer 1

[0xD34F]

Вызывая метод text, вы затираете содержимое элемента. Чтобы не терять ранее добавленный контент, добавляйте текст в отдельный элемент. Например.

Comments

[Genri_Rus]

Спасибо Вам за объяснения, получается и аналог с методом html() также будет затираться, как и метод text() ?

[0xD34F]

Genri_Rus, а вы попробуйте и посмотрите, что получится.

[Genri_Rus]

0xD34F, а такой вопрос, добавить просто текст в модальное окно, не оборачивая его в никакие теги нельзя ?

[Genri_Rus]

0xD34F, а почему у меня так работает ?

https://codepen.io/Genri_Rus/pen/eajaQo

[0xD34F]

Genri_Rus, добавить просто текст можно - один раз, перед добавлением основного контента. Если вы текст в дальнейшем менять не собираетесь, ну ок. Если же собираетесь - тоже можно, но это будет сложнее, метод text тут уже вам не поможет.

"Почему работает" - то есть, вы не понимаете, что сами написали? Извините, объяснять, почему дважды два - четыре, это выше моих сил.

[Genri_Rus]

0xD34F, я имел ввиду, разве так писать можно ?

Ведь children не находит соответствующие элементы с классом modal-item

Поэтому оно работает, но как-то криво что ле

[Genri_Rus]

0xD34F, а вот так можно оставить ?

https://codepen.io/Genri_Rus/pen/eajaQo