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!

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!

• javascript
• jquery
• html
• variables

• How are you adding that text to the page? In jquery you'd have to do something like $('#somewhere').html(dateString). – Marc B Commented Nov 14, 2011 at 18:12
• li.appendChild(document.createTextNode(' - ' + dateString)); – Zanrok Commented Nov 14, 2011 at 18:51
• There's your problem. creatTextNode() doesn't interpret html in the string. it's inserted as literal text. – Marc B Commented Nov 14, 2011 at 19:31
• Is there a way i can interpret html in the string then? – Zanrok Commented Nov 14, 2011 at 19:42
• Since you've tagged this question with jquery, just use the .html() call. No need to use raw dom operations when you're on jquery. – Marc B Commented Nov 14, 2011 at 19:42

5 Answers 5

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

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.

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

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

I think you might be better off separating your display from your logic and update a div or span (when you want display inline) using JQuery. Something like the following.

<div id='rawr'> <span id='updateme'></span> </div>

<script> $("#updateme").html(monthName); </script>