How can I insert html code inside a javascript variable?

Question

So I am pulling information from google calendar and I need to divide the variables I am receiving so I can display them in different divs. So what i need to do is something like this

var divMonth = '<div id ="rawr">';
var divMonthClose = '</div>';

dateString =  divMonth + monthName + divMonthClose + ' | ' + parseInt(dateMonth, 10);

However, as you imagine the result displayed is...

"<div id ="rawr">December</div> | 8"

It does not actually interpret the html and make the div layer. So my question is.. How can i insert html code within the variable so it actually works as html? Is there a function I am missing or is it even possible?

Thanks in advance for any help or ideas you might have!

Answer 1

You have this post tagged as jquery, so you could do something like so:

var monthName = 'December';
var dateMonth = 31;

var ele = $('<div></div>')
    .attr('id', 'rawr')
    .html(monthName + ' | '  + parseInt(dateMonth, 10));
$('#container').append(ele);

Answer 2

use the createElement function:

var elm = document.createElement('div');
elm.setAttribute('id', 'rawr');
elm.innerHTML = THE_CODE_AND_TEXT_YOU_NEED_INSIDE_THE_DIV;

when you want to add it to the document:

$('MYELEMENT').append(elm);

where MYELEMENT is (obviously) the element you want to append the new div to.

Answer 3

If you want it without jQuery something like this would work:

var divMonth = document.createElement('div');
divMonth.id = 'rawr';

divMonth.innerHTML = monthName + ' | ' + parseInt(dateMonth, 10);

document.getElementById("where_you_want_to_put_this").appendChild(divMonth);

Answer 4

Assuming that you want the html structure to be something like:

<div id="wrapper">
 ...
  <div id="date">
   <div id="rawr">
   </div>
  </div>
</div>

you can create the html code and add the content with one line:

$("#wrapper").append('<div id="date"><div id="rawr">'+monthName+'</div> | '+parseInt(dateMonth, 10)+'</div>');