Вывод HTML элементов в JS

Пока плохо разбираюсь в JS,не подскажите как решить данную задачу ну или пояснить как эту задачу решить.

При клике на <i> с клаcсом .itemAdd (см. приклепленый код) в конец страницы должен выводится этот же код но в <h4> должен добавлятся <i class="close">x</i>

<h4><a class="item_add" href="#"><i class="itemAdd">#</i></a> <span class=" item_price">10</span></h4>


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

Автор решения: Voprositel

Вот мое решение с комментариями:

function appendDiv(e) {
  e.stopPropagation(); // Запрещаем всплытие событий

  // Далее само решение
  const apDiv = document.createElement('div'); // Создаем див и помещаем в переменную
  apDiv.textContent = 'Добавленный див'; // Содержание див`а
  div.appendChild(apDiv); // Помещаем див в див из разметки
}

const div = document.querySelector('div'); // Вот тот самый див из разметки, мы нашли его и поместили в переменную ссылку на него

div.addEventListener('click', appendDiv, {
  capture: true
}); // здесь мы вешаем на див из разметки событие 'click' и передаем колбеком функцию appendDiv
<div>Нажми на меня</div>

→ Ссылка