Как создать html из полученных данных в форме?

Question

Пользователь вводит время, кликает на кнопку, и тут же добавляется данные, я это сделал, а вот как эти данные оформить в HTML код?

мне надо что бы было вот так: <div class="item"><span class="data">введенные данные</span> <span class="delete">х</span></div>

буду рад любой помощи!

let dataEventGroupTimer = '[data-event-group__timer]';

$('[data-event-group__add-timer]').on('click', function() {
  let dataEventGroupTimerVal = $(dataEventGroupTimer).val();

  $(this).parent().prepend(dataEventGroupTimerVal);

  $(dataEventGroupTimer).val('');

  console.log(dataEventGroupTimer);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" placeholder="__:__" data-event-group__timer>

  <button data-event-group__add-timer>Добавить временной интервал</button>
</div>

Answer 1

let dataEventGroupTimer = '[data-event-group__timer]';

$('[data-event-group__add-timer]').on('click', function() {
  let dataEventGroupTimerVal = $(dataEventGroupTimer).val();

  let elements = $('<div class="item"><span class="data">введенные данные</span> <span class="delete">х</span></div>');
  elements.find(".data").text(dataEventGroupTimerVal);
  $(this).parent().prepend(elements);

  $(dataEventGroupTimer).val('');

  console.log(dataEventGroupTimer);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" placeholder="__:__" data-event-group__timer>

  <button data-event-group__add-timer>Добавить временной интервал</button>
</div>

БЛОГ НА HUSL

Как создать html из полученных данных в форме?

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