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

Question

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

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

等等...

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

更新：

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

Answer 1

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

中不起作用

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

<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

说你有

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

在您的 CSS 上，您将拥有：

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

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

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

你怎么看？

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 代码块吗？

Other than using multi line vars, is there any other way I can store blocks of HTML code?

html

javascript

jquery

javascript-events