Question

因为我认为在 var 中使用多行字符串不是很方便。有什么其他方法可以解决这个问题？我不希望我的代码是这样的：

var str = "<p>\'Hello World\'</p>"+"<a href=\'www.blah.com\'>click me</a>";

等等......

我需要这个，因为我希望在javascript事件之后加载HTML。我不想使用转义字符作为引号，因为它会使代码有点不可读，特别是当你想对它进行更改时。

更新

我不希望代码在页面加载的同时加载。将其设置为 display：none; 然后 display：block; 将减慢速度。

Answer 1

我的第一直觉是一个隐藏的元素，但我看到了关于不想加载html的评论我的下一个想法是尝试使用隐藏元素的XML <!CDATA[...]]>块，但测试表明它不适用于HTML。

这有一种令人难以置信的hacky感觉，但它可以工作（至少它在我非常有限的测试中做到了。）

<script id="str">/*
    <p>'Hello World'</p>
    <a href='www.blah.com'>click me</a>
 */</script>

使用jquery提取html并删除注释。

  var str = $("#str").html();
  str = str.slice(2, str.length-3).trim();

Answer 2

说你有

＆＃13;

<p id="message"> Hello World</p>

＆＃13;

在您的CSS上，您将拥有：

＆＃13;

#message
{
  display:none;
  /* other css*/
  }

＆＃13;

在JavaScript上你可以有类似的东西：

＆＃13;

/* after some event or something */
document.getElementById("message").style.display = "block";

＆＃13;

您怎么看？

Answer 3

感谢@ drs9222我终于找到了办法。我将回答我自己的问题，以便将来的读者知道我为解决问题所做的工作。还要感谢@dandavis给出了关于使用script type="text/plain"的想法。这是我的答案。

<!DOCTYPE html>
<html>

<head>
  <title>Testing</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>

  <script type="text/plain" id="preCode">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit cumque nobis quo et ducimus. Porro, minima, facilis. Explicabo iure non optio quae! Eveniet dolore ex sunt nemo maiores eum voluptatum.</p>
  </script>

  <div class="insideHere">
    <!-- preCode will go inside here -->
  </div>

  <input id="clickMe" type="button" value="Click Me!" />

  <script>
    $('#clickMe').click(function() {
      $('.insideHere').append($('#preCode').html());
    });
  </script>
</body>

</html>

此代码不会妨碍除代码本身之外的其他元素的加载。

除了使用多行变量，还有其他方法可以存储HTML代码块吗？

3 个答案: