H1 Tag Variable

Question

I have a variable in my append line "key" and "value" but I do not know how to keep span format for the key value. To have the blue color be on the key variable.

    for key,value of data 
      $('#data-results').append "<br>" +  "<li>" + """<span style="color: #0000CD;"> key </span>""" + ": " + value

Results on Browser

key: 0004a32eb300

What it should be:

user: 0004a32eb300 ^ user being blue

Thank you in advance

Answer 1

http://coffeescriptcookbook.com/chapters/strings/interpolation

$('#data-results').append "<br>" + "<li>" + """<span style="color: #0000CD;"> #{key} </span>""" + ": " + value

Answer 2

You should either use a template, or build up your HTML using jQuery. Also, don't use inline styles, add CSS like this:

li span.key-from-data {
    color: #0000CD;
}

Then with CoffeeScript as follows:

for own key, value of data
  $li = $ '<li>',
    text: ": #{value}"
  $span = $ '<span>',
    class: "key-from-data"
    text: key
  $li.prepend $span
  $('#data-results').append $li

See it working here.