jQuery append html element

Question

I have 2 p elements as follows

<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>

I have a date picker to select dates and i'm showing the selected dates as above. My approach is every time a user selects a date range i'm removing span element with id booking-summary-start-date and booking-summary-end-date and updating the span using .append method of jquery as follows.

      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>`);

here the removing part works but when appending it appends a string of for ex: ${start_date} instead of a span element.

How can i append the span element instead of a string ?

Can you create a small demo for this using jsfiddle or snippet here to show the issue happening. Also, mention if you are getting any errors in the console. — palaѕн
– palaѕн, Commented May 4, 2020 at 5:20
As you've tagged this [jquery], change booking_end_date_container.append to $(booking_end_date_container).append and it will work fine (though I recommend using either vanilla javascript or jquery to remove these confusions). Example of the two: jsfiddle.net/oa7rne6h — fdomn-m
– fdomn-m, Commented May 4, 2020 at 5:25
Your code works fine when start_date and end_date have a value. — Gerard
– Gerard, Commented May 4, 2020 at 5:27
The issue is that javascript .append() doesn't work like jquery .append() and, as you've tagged both, one can only assume you're getting them mixed up (or just simply not understanding how one works). Javascript's .append("string") will append it as a literal while jquery's .append(html) will parse the html and append nodes as required. — fdomn-m
– fdomn-m, Commented May 4, 2020 at 5:32

Sebastian Kaczmarek · Accepted Answer · 2020-05-04 05:29:36Z

You need to createElement() and then .appendChild() if you want it to add a child node to the container span:

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);

Here I have created a snippet to demonstrate how it works:

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>

Thanks! Your solution works. Thanks for pointing out my mistake.

Collectives™ on Stack Overflow

jQuery append html element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related