[英]jQuery append html element
我有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>
我有一个 select 日期的日期选择器,我正在显示如上所述的选定日期。 我的方法是每次用户选择一个日期范围时,我都会删除 ID booking-summary-start-date
和booking-summary-end-date
的span
元素,并使用.append
的 .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 元素。
我如何 append 跨度元素而不是字符串?
如果您希望将子节点添加到容器跨度,则需要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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.