I am trying to store a block of HTML in javascript variable like this,

var element = <div class="MMinfoboxRoot">
  <div class="MMinfoboxaddress">
    <div>
      <span class="MMrecordName">leicester
      </span>
      <br>
      <span class="MMdaySpan MMdaySpanTitle">Opening Times
      </span>
      <br>
      <br>
      <span class="MMdaysRoot MMdaysmonday">
        <span class="MMdaySpan">Monday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdaystuesday">
        <span class="MMdaySpan">Tuesday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdayswednesday">
        <span class="MMdaySpan">Wednesday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdaysthursday">
        <span class="MMdaySpan">Thursday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdaysfriday">
        <span class="MMdaySpan">Friday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdayssaturday">
        <span class="MMdaySpan">Saturday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 6pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdayssunday">
        <span class="MMdaySpan">Sunday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">11am - 5pm
        </span>
      </span>
      <br>
      <br>
      <br>
      <div class="links">
        <strong style="color: rgb(0, 0, 102);">Get directions
        </strong>
        <form onsubmit="GetDirectionsFromInfoBox( this, 0 ); return false;" id="directionsForm-1" method="post" action="" class="directions">
          <label for="infoboxDir1">From
            <input type="text" id="infoboxDir1" value="birstall" class="text">
          </label>
          <input type="image" class="map-submit" src="css/winter-sale-2010/images/multimap/go-button.gif">
        </form>
        <a class="go-to-location" onclick="ZoomToLocation( 0 ); return false;" href="#">Zoom to this location
        </a>
      </div>
    </div>
  </div>
</div>

However it is throwing js errors saying unecapuslated strings. How can I do this please?

I am trying to store a block of HTML in javascript variable like this,

var element = <div class="MMinfoboxRoot">
  <div class="MMinfoboxaddress">
    <div>
      <span class="MMrecordName">leicester
      </span>
      <br>
      <span class="MMdaySpan MMdaySpanTitle">Opening Times
      </span>
      <br>
      <br>
      <span class="MMdaysRoot MMdaysmonday">
        <span class="MMdaySpan">Monday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdaystuesday">
        <span class="MMdaySpan">Tuesday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdayswednesday">
        <span class="MMdaySpan">Wednesday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdaysthursday">
        <span class="MMdaySpan">Thursday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdaysfriday">
        <span class="MMdaySpan">Friday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 8pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdayssaturday">
        <span class="MMdaySpan">Saturday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">9am - 6pm
        </span>
      </span>
      <br>
      <span class="MMdaysRoot MMdayssunday">
        <span class="MMdaySpan">Sunday:&nbsp;
        </span>
        <span class="MMdayHoursSpan">11am - 5pm
        </span>
      </span>
      <br>
      <br>
      <br>
      <div class="links">
        <strong style="color: rgb(0, 0, 102);">Get directions
        </strong>
        <form onsubmit="GetDirectionsFromInfoBox( this, 0 ); return false;" id="directionsForm-1" method="post" action="" class="directions">
          <label for="infoboxDir1">From
            <input type="text" id="infoboxDir1" value="birstall" class="text">
          </label>
          <input type="image" class="map-submit" src="css/winter-sale-2010/images/multimap/go-button.gif">
        </form>
        <a class="go-to-location" onclick="ZoomToLocation( 0 ); return false;" href="#">Zoom to this location
        </a>
      </div>
    </div>
  </div>
</div>

However it is throwing js errors saying unecapuslated strings. How can I do this please?

• javascript
• html

• 1 I removed the extra code backticks so you can see the different in the syntax highlighter, which recognizes strings correctly :) – Nick Craver Commented Dec 14, 2010 at 12:56
• how would you reccomend i create this HTML then, document.createElement(), no thanks! – sea_1987 Commented Dec 14, 2010 at 12:56
• Just store the whole thing inside hidden DIV element, call it for example "MyRoot" and then var element = document.getElementById("MyRoot").innerHTML; will give you what you want. This way you won't mess with quotes or new lines and unless the contents are really huge, it won't affect loading time of the page. – Shadow Wizard Commented Dec 14, 2010 at 13:32

4 Answers 4

You need a backslash at the end for string that span multiple lines and some quotes to encapsulate it overall, like this:

var element = '<div class="MMinfoboxRoot"> \
  <div class="MMinfoboxaddress"> \
  ....';

Also as @T.J. points out if you had any ' in the string (or whichever wrapping quotes you used), be sure to use the escaped form, for example \' here.

You could store it inside an ID'ed script tag instead:

<html>
<head>
<script id="htmlTemplate" type="text/x-tmpl">
    This <h1>is</h1> templated.
</script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(
        function() {
            $('#2nd').html($('#htmlTemplate').text());
        }
    );
</script>
</head>
<body>
    <div id="1st">First div</div>
    <div id="2nd">Second div</div>
</body>
</html>

By the way, there's a jQuery plugin using this method: http://api.jquery.com/category/plugins/templates/

First of you need to use either ' or " to encapsulate strings literals.

Also, you need to add a \ add the end of each line, otherwise JavaScript won't recognize multi line strings.

Something like this will work:

var element = '<div class="MMinfoboxRoot">\
  <div class="MMinfoboxaddress">\
    <div>\
      <span class="MMrecordName">leicester\
      </span>'

Make sure to escape any ' inside that string, and if you want to have line breaks you need to add a \n in front of the trailing \.

Here is a handy tool that I've been using
http://htmltojavascript.com

It automatically creates a list of html tags, keeping
the indentation. I believe this using join is better
compared to concatenation as some members suggested.

I have ran your code on that site and it seems like it works.