Как вывести на страницу карточки с картинкой, ссылка на которую указываю в модальном окне input?

Question

[Рамазан]

Мне нужно сделать так, чтобы я вводил в модальном окне в один input имя карточки, а во второй input ссылку на карточку и при нажатии на "Сохранить" она должна появляться на странице.
У меня есть список:

<ul class="places__list">

      </ul>

В него нужно вставлять новые карточки с картинкой и подписью по готовому шаблону:

<template id="card-template">
  <li class="places__item card">
    <img class="card__image" src="" alt="" />
    <button type="button" class="card__delete-button"></button>
    <div class="card__description">
      <h2 class="card__title">
      </h2>
      <button type="button" class="card__like-button"></button>
    </div>
  </li>
</template>

Получается, я должен ввести в модальное окно имя и ссылку на картинку, а она должна появляться в самом начале списка уже имеющихся карточек:

Answer 1

[0xD34F]

кнопка.addEventListener('click', () => {
  const [ li ] = шаблон.content.cloneNode(true).children;
  li.querySelector('.card__image').src = инпут_с_ссылкой.value;
  li.querySelector('.card__title').textContent = инпут_с_подписью.value;
  список.insertAdjacentElement('afterbegin', li);

  // или

  список.prepend(document.importNode(шаблон.content, true));
  список.querySelector('img').setAttribute('src', инпут_с_ссылкой.value);
  список.querySelector('h2').innerText = инпут_с_подписью.value;
});

Comments

[Рамазан]

Использовал первый вариант, но почему то у меня вместо вставки новой карточки дублируется самая первая.



Также добавил в код очистку полей прежде чем вводить новые имя и ссылки, но к сожалению не помогло

const popupButtonAdd = popupAddCard.querySelector('.popup__button')
const inputAddName = document.querySelector('.popup__input_type_card-name').value
const inputAddUrl = document.querySelector('.popup__input_type_url').value

popupButtonAdd.addEventListener('click', (evt) => {
    evt.preventDefault()
    document.querySelector('.popup__input_type_card-name').value = '';
    document.querySelector('.popup__input_type_url').value = '';
    const placesList = document.querySelector('.places__list')
    const cardContentNewCard = document.querySelector('.card').cloneNode(true)
    cardContentNewCard.querySelector('.card__image').textContent = inputAddName
    cardContentNewCard.querySelector('.card__title').src = inputAddUrl
    placesList.prepend(cardContentNewCard);
})

[Рамазан]

Если это как то влияет, код который автоматически создает карточки, которые в данный момент уже есть на странице

export function addCard(link, alt, name, removeCard) {
    const cardTemplate = document.querySelector('#card-template').content
    const cardContent = cardTemplate.querySelector('.card').cloneNode(true)
  
    cardContent.querySelector('.card__image').src = link;
    cardContent.querySelector('.card__image').alt = alt;
    cardContent.querySelector('.card__title').textContent = name;
  
    function removeCard(evt) {
      const evtTarget = evt.target;
      const card = evtTarget.closest('.card')
      card.remove()
    }
  
    const deleteButton = cardContent.querySelector('.card__delete-button');
    deleteButton.addEventListener('click', removeCard)
  
    return cardContent
  } 

  initialCards.forEach(card => {
    const placeItem = addCard(card.link, card.alt, card.name);
    const placeList = document.querySelector('.places__list')
    placeList.append(placeItem)
  })

[0xD34F]

const inputAddName = document.querySelector('.popup__input_type_card-name').value

Рамазан, то есть, значение получаете один раз, а потом удивляетесь, а чего это оно везде одинаковое. Или уносите эту строчку внутрь обработчика события click целиком, или только .value (= inputAddName -> = inputAddName.value). Аналогично и с url.

document.querySelector('.card').cloneNode(true)

Если копируете уже существующую карточку, зачем тогда вам шаблон?