Create a span element inside another element using javascript

Question

This code is from google calender.

var dateString =  (startJSDate.getMonth() + 1) + "/" + startJSDate.getDate();
  if (!startDateTime.isDateOnly()) {
  dateString += " @ " + startJSDate.getHours() + ":" + 
  padNumber(startJSDate.getMinutes());
}
 dateString = "<span>" +dateString + "</span>";
 var li = document.createElement('li');

I need to add a span tag around the variable dateString, adding them as above returns "1234" as text on the page.

The string is rendered as such:

li.appendChild(document.createTextNode(' - ' + dateString));

did you try `li.innerHTML = dateString ` ? – Naren Sisodiya Apr 27 '11 at 10:37 — Naren Sisodiya, Apr 27 '11 at 10:37

score 79 · Accepted Answer · answered Apr 27 '11 at 10:48

79

Try following code, create span using createElement and insert date string in it as innerHTML. Then append span to li.

var dateSpan = document.createElement('span')
dateSpan.innerHTML = dateString;
var li = document.createElement('li');
li.appendChild(dateSpan);

answered Apr 27 '11 at 10:48

Naren Sisodiya

7,158
2
24
35

1

Never seen such a coincidence, copied the code inside my project and even names of the variables matched... – Chaki_Black Sep 07 '21 at 09:48
1

@Chaki_Black: that's called developer's language :P – Naren Sisodiya Sep 15 '21 at 15:40

score 1 · Answer 2 · answered Apr 27 '11 at 10:42

1

if you can use jquery, then the method .wrap() will do it what you want.

answered Apr 27 '11 at 10:42

Reporter

3,897
5
33
47

Create a span element inside another element using javascript

2 Answers2