我有 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>
我有一个日期选择器来选择日期,并且我显示了如上所述的所选日期。我的方法是每次用户选择日期范围时,我都会删除 id 为 booking-summary-start-date
和 booking-summary-end- 的
并使用 jquery 的 span
元素date.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 元素而不是字符串?
最佳答案
如果您希望它向容器范围添加子节点,则需要先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>
关于javascript - jQuery 追加 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61585592/