Почему баннер добавляется только к одной карточке?

Question

Нужно определённым карточкам добавлять баннер. case работает верно для обеих карточек (в консоли выводится оба имени), но баннер ставится только на последнюю. Пробовал отдельными блоками через if, но результат тот же.

function setCardBanner() {
  const cardArt = document.querySelectorAll('.goodsart')
  const cardImg = document.querySelectorAll('.imgsize-catalog')
  const div = document.createElement('div')
  const span = document.createElement('span')

  div.classList.add('coauthor')
  span.textContent = 'Соавтор курса'

  for (let i = 0; i < cardArt.length; i++) {
    const author = cardArt[i].textContent

    switch (author) {
      case 'Фарида Рубин':
      case 'Наталья Фебер':
        console.log(author)
        cardImg[i].classList.add('rel')
        cardImg[i].appendChild(div).appendChild(span)
    }
  }
}

Answer 1

function setCardBanner() {
  const cardArt = document.querySelectorAll('.goodsart')
  const cardImg = document.querySelectorAll('.imgsize-catalog')

  for (let i = 0; i < cardArt.length; i++) {
    const author = cardArt[i].textContent

    switch (author) {
      case 'Фарида Рубин':
        console.log(author)

        const div1 = document.createElement('div')
        const span1 = document.createElement('span')

        div1.classList.add('coauthor')
        span1.textContent = 'Соавтор курса'
        div1.prepend(span1)
        cardImg[i].prepend(div1)
        cardImg[i].classList.add('rel')
        break
      case 'Наталья Фебер':
        console.log(author)

        const div2 = document.createElement('div')
        const span2 = document.createElement('span')

        div2.classList.add('author')
        span2.textContent = 'Автор курса'
        div2.prepend(span2)
        cardImg[i].prepend(div2)
        cardImg[i].classList.add('rel')
    }
  }
}

БЛОГ НА HUSL

Почему баннер добавляется только к одной карточке?

Ответы (1 шт):