HTML块存储为var javascript

Question

HTML块存储为var javascript

我试图在这样的javascript变量中存储一块HTML,

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>

Run Code Online (Sandbox Code Playgroud)

然而,它抛出了js错误,说出了无谓的字符串.我该怎么办？

Answer 1

Nic*_*ver 8

你需要一个反斜杠,用于跨越多行的字符串和一些引号来整体封装它,如下所示:

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

Run Code Online (Sandbox Code Playgroud)

另外,@ TJ指出如果您'在字符串中有任何内容(或您使用的任何包装引号),请务必使用转义表单,例如\'此处.

Answer 2

Flo*_*Flo 8

您可以将其存储在ID'ed脚本标记内:

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

Run Code Online (Sandbox Code Playgroud)

顺便说一句,有使用这种方法的jQuery插件:http://api.jquery.com/category/plugins/templates/

归档时间：	15 年，9 月前
查看次数：	14364 次
最近记录：	11 年，11 月前