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!

Solution 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);

Solution 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.

Solution 3

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>');

Solution 4

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);

View more solutions

Comments

[Alex Wayne]

Almost exactly how I would do it. Although jQuery doesn't require properly closed tags in it's element constructor syntax. So it can simply be $('<div>')

[david]

did you just wack $('MYELEMENT').append(elm); because the OP had tagged jquery, where document.getElementById("MYELEMENT").append(elm), would of done the same thing?

[Alex Wayne]

If you are using jQuery to append, you really dont need to use createElement since jQuery has a element constructor syntax that is a bit easier to use.

[Jesse]

Thanks Squeegy, didn't know that.

[moongoal]

Even if the jQuery object-creaton syntax looks easier, this avoids the parsing stage. And yes, I added the jQuery part because jQuery has been tagged and the two syntaxes do the same thing, although the latter is easier to read.

[Zanrok]

Using this methods results in [object Object] being displayed. I inputted the code as follows.. editing the original [var dateString = $('<div></div>').attr('id', 'rawr') .html(monthName + ' | ' + parseInt(dateMonth, 10)); $('#container').append(dateString);] } return dateString; }

[Jesse]

@Zanrok the sample code I posted is expecting to append to the "container" element. if you are returning a datestring in a custom function then you will need to modify accordingly

[Zanrok]

@Jesse thanks. I think i got it working. I got the values displaying above... the function. But with some CSS i think that will solve the issues hopefully. Otherwise it displays at [object, Object]