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!

How are you adding that text to the page? In jquery you'd have to do something like $('#somewhere').html(dateString). — Marc B
– Marc B, Commented Nov 14, 2011 at 18:12
li.appendChild(document.createTextNode(' - ' + dateString)); — Zanrok
– 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
– Marc B, Commented Nov 14, 2011 at 19:31
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
– Marc B, Commented Nov 14, 2011 at 19:42

Jesse · Accepted Answer · 2011-11-14 18:20:51Z

8

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

answered Nov 14, 2011 at 18:20

Jesse

8,4236 gold badges55 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Wayne Over a year ago

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

Zanrok Over a year ago

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 Over a year ago

@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 Over a year ago

@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]

moongoal · Accepted Answer · 2011-11-14 18:16:34Z

5

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.

answered Nov 14, 2011 at 18:16

moongoal

2,97624 silver badges24 bronze badges

3 Comments

david Over a year ago

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 Over a year ago

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.

moongoal Over a year ago

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.

whytheplatypus · Accepted Answer · 2011-11-14 18:33:40Z

2

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

answered Nov 14, 2011 at 18:33

whytheplatypus

1896 bronze badges

Comments

Panagiotis Panagi · Accepted Answer · 2011-11-14 18:35:31Z

2

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

edited Nov 14, 2011 at 18:35

answered Nov 14, 2011 at 18:27

Panagiotis Panagi

10.1k7 gold badges60 silver badges103 bronze badges

Comments

likestoski · Accepted Answer · 2011-11-14 18:17:41Z

0

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>

answered Nov 14, 2011 at 18:17

likestoski

1,9114 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

How can I insert html code inside a javascript variable?

5 Answers 5

4 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest