Adding HTML tags with JavaScript

I have the following bit of code

			listItem = document.createElement('li');
			listItem.className = "schoolName";
			liText = document.createTextNode(results[i].name + ', ' + (Math.round((distance * 0.00062137119)*10)/10) + ' miles');

			listItem.appendChild(liText);
			list.appendChild(listItem);
          }
		  resultsDiv.appendChild(list);

Open in new window


which displays results as so:
<li class="schoolName">School Name, Distance Miles</li>

however I would like it to display as
<li class="schoolName">School Name, <span>Distance Miles</span></li>

I have tried to create new elements and append them but have not been able to get it right.
dchidAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Had to fill in some blanks but this works for me ...

  var results = [
    'fred','john','mary'
  ];
  var i = 0;
  resultsDiv = document.getElementById('results');
  list = document.createElement('ul');
  listItem = document.createElement('li');
  listItem.className = "schoolName";
  liText = document.createTextNode(results[i] + ', ');
  spanItem = document.createElement('span');
  spanText = document.createTextNode((Math.round((20002 * 0.00062137119)*10)/10) + ' miles');
  spanItem.appendChild(spanText);
  listItem.appendChild(liText);
  listItem.appendChild(spanItem);
  list.appendChild(listItem);
  resultsDiv.appendChild(list);

Open in new window

0
 
manjunathubCommented:
u can use innerHTML property instead of the creating dom object

listItem.innerHTML = "School Name, <span>Distance Miles</span>"
0
 
dchidAuthor Commented:
Thanks, that helped a lot. The final code used was:

function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
              var resultsDiv, list, spanItem, spanText, listItem, liText, distance, lat, long;
              resultsDiv = document.getElementById("results");
              list = document.createElement('ul');
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
                lat   = results[i].geometry.location.lat();
              long  = results[i].geometry.location.lng();
                  distance = google.maps.geometry.spherical.computeDistanceBetween(pyrmont, new google.maps.LatLng(lat, long));
                   listItem = document.createElement('li');
                    listItem.className = "schoolName";
                  liText = document.createTextNode(results[i].name);
                      spanItem = document.createElement('span');
                    spanText = document.createTextNode((Math.round((20002 * 0.00062137119)*10)/10) + ' miles');
                    spanItem.appendChild(spanText);
                    listItem.appendChild(liText);
                    listItem.appendChild(spanItem);
                    list.appendChild(listItem);
          }
              resultsDiv.appendChild(list);
        }
      }
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.