2

Пользователь вводит время, кликает на кнопку, и тут же добавляется данные, я это сделал, а вот как эти данные оформить в 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>

1 ответ 1

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>

1
  • Так просто, мне стыдно. Искренне благодарю!
    – Aleksandr
    Commented 4 авг. 2020 в 0:20

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.