jQuery append html element

Question

我有两个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>

我有一个日期选择器来选择日期，我将如上所述显示所选日期。我的方法是，每次用户选择日期范围时，我都会删除id为booking-summary-start-date和booking-summary-end-date的span元素，并使用jquery的.append方法更新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");
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>`);

在这里，删除部分是有效的，但在附加时，它会附加一个字符串for ex:$｛start_date｝，而不是span元素。

如何附加span元素而不是字符串？

Answer 1

如果要将子节点添加到容器span:，则需要先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>