?
Solved

Adding HTML tags with JavaScript

Posted on 2012-09-11
3
Medium Priority
?
300 Views
Last Modified: 2012-09-11
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.
0
Comment
Question by:dchid
3 Comments
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38386196
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
 
LVL 5

Expert Comment

by:manjunathub
ID: 38386209
u can use innerHTML property instead of the creating dom object

listItem.innerHTML = "School Name, <span>Distance Miles</span>"
0
 

Author Closing Comment

by:dchid
ID: 38386268
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question