HTML block stored as var javascript

Question

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 removed the extra code backticks so you can see the different in the syntax highlighter, which recognizes strings correctly :) — Nick Craver
– Nick Craver, Commented Dec 14, 2010 at 12:56
how would you reccomend i create this HTML then, document.createElement(), no thanks! — sea_1987
– 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. — user447356
– user447356, Commented Dec 14, 2010 at 13:32

Community · Accepted Answer · 2017-05-23 12:14:43Z

8

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.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Dec 14, 2010 at 12:53

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

1 Comment

T.J. Crowder Over a year ago

And don't forget to escape any single quote or backslash characters inside the string by prefacing them with a backslash (if you're using ' to quote the string, as Nick has above).

Brad Parks · Accepted Answer · 2012-07-28 21:09:44Z

8

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/

edited Jul 28, 2012 at 21:09

Brad Parks

73.3k71 gold badges297 silver badges374 bronze badges

answered Dec 14, 2010 at 13:18

Flo

2,7881 gold badge16 silver badges12 bronze badges

Comments

Ivo Wetzel · Accepted Answer · 2010-12-14 12:56:33Z

1

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

answered Dec 14, 2010 at 12:56

Ivo Wetzel

46.8k17 gold badges102 silver badges112 bronze badges

Comments

taesu · Accepted Answer · 2014-10-26 15:14:43Z

1

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.

answered Oct 26, 2014 at 15:14

taesu

4,5905 gold badges26 silver badges41 bronze badges

Collectives™ on Stack Overflow

HTML block stored as var javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related