jQuery добавление html элемент

Question

У меня есть 2 p элементов следующим образом

<p id="booking-sum-start"><span id="booking-sum-start-new"><span id="booking-summary-start-date"><?php echo $booking->start_date;?></span></span></p>
<p id="booking-sum-end"><span id="booking-sum-end-new"><span id="booking-summary-end-date"><?php echo $booking->end_date;?></span></span></p>

У меня есть средство выбора даты, чтобы выбрать даты, и я показываю выбранные даты, как указано выше. Мой подход заключается в том, что каждый раз, когда пользователь выбирает диапазон дат, я удаляю элемент span с идентификаторами booking-summary-start-date и booking-summary-end-date и обновляю span, используя .append метод jquery, следующим образом.

      let booking_start_date = document.getElementById("booking-summary-start-date");
      let booking_end_date = document.getElementById("booking-summary-end-date");

      booking_start_date.remove();
      booking_end_date.remove();

      let booking_start_date_container = document.getElementById("booking-sum-start-new");
      let booking_end_date_container = document.getElementById("booking-sum-end-new");

      booking_start_date_container.append(`<span id="booking-summary-start-date">${start_date}</span>`);
      booking_end_date_container.append(`<span id="booking-summary-end-date">${end_date}</span>`);

здесь удаляющая часть работает, но при добавлении она добавляет строку для ex: $ {start_date} вместо элемента span.

Как добавить элемент span вместо строки?

Answer 1

Вам нужно createElement(), а затем .appendChild(), если вы хотите, чтобы он добавил дочерний узел в диапазон контейнера:

let start_span = document.createElement('span');
start_span.id = 'booking-summary-start-date';
start_span.innerText = start_date;
booking_start_date_container.appendChild(start_span);

let end_span = document.createElement('span');
end_span.id = 'booking-summary-end-date';
end_span.innerText = end_date;
booking_end_date_container.appendChild(end_span);

Здесь я создал фрагмент, чтобы продемонстрировать, как он работает:

let booking_start_date = document.getElementById("booking-summary-start-date");
let booking_end_date = document.getElementById("booking-summary-end-date");

booking_start_date.remove();
booking_end_date.remove();

let booking_start_date_container = document.getElementById("booking-sum-start-new");
let booking_end_date_container = document.getElementById("booking-sum-end-new");

let start_date = '123';
let end_date = '456';

let start_span = document.createElement('span');
start_span.id = 'booking-summary-start-date';
start_span.innerText = start_date;
booking_start_date_container.appendChild(start_span);

let end_span = document.createElement('span');
end_span.id = 'booking-summary-end-date';
end_span.innerText = end_date;
booking_end_date_container.appendChild(end_span);

<p id="booking-sum-start"><span id="booking-sum-start-new"><span id="booking-summary-start-date"><?php echo $booking->start_date;?></span></span></p>
<p id="booking-sum-end"><span id="booking-sum-end-new"><span id="booking-summary-end-date"><?php echo $booking->end_date;?></span></span></p>