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

Question

Because I think using multi-line strings in a var is not very convenient. What are some other ways to handle this? I don't want my code to be like this:

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

And so on...

I need this because I want the HTML to load after a javascript event. I don't want to use escape characters for quotes as it will make the code a bit unreadable specially when you want to make changes to it.

Update:

I don't want the code to load at the same time as the page loads. Setting it to display: none; then display: block; will slow things down.

Why not set the element as display:none and then just use display:block after loaded? — Anthony Horne, Apr 11 '15 at 22:02
You don't need to escape those quotes, also whats with the `,`? — Musa, Apr 11 '15 at 22:03
@AnthonyHorne because it will load the elements as early as the others and will slow down the loading of the page. — Angel Angeles III, Apr 11 '15 at 22:09
@Musa i meant a break line there but I'm writing this on my phone. — Angel Angeles III, Apr 11 '15 at 22:10
You could look at something like http://stackoverflow.com/a/21311/1662973 to rather just have the full file without escaping and then load externally (in the body onload function, i.e. after document as loaded) — Anthony Horne, Apr 11 '15 at 22:17

drs9222 · Accepted Answer · 2015-04-11T22:33:17.323

1

My first instinct was a hidden element but I saw the comment about not wanting the html to load.
My next thought was to try the XML <!CDATA[...]]> block wihtin the hidden element but testing showed that won't work in HTML.

This has an incredibly hacky feel but it could work (at least it did in my very limited testing).

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

The use jquery to extract the html and strip out the comments.

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

edited Apr 11 '15 at 22:33

answered Apr 11 '15 at 22:22

drs9222

4,448
3
33
41

So .html() method will remove the /* and */ from the script? – Angel Angeles III Apr 11 '15 at 22:24
No but that could be parsed out easily enough after. I can update the example. – drs9222 Apr 11 '15 at 22:26
This is *extremely* hacky. But well, why not? :D – ByteHamster Apr 11 '15 at 22:27
Wouldn't it be much simpler if: .slice(2,-2).trim(); ? – Angel Angeles III Apr 11 '15 at 23:02
I dont see why this method is supposed to be "faster" and the display:none; method supposed to be "slower" . – Mohd Abdul Mujib Apr 11 '15 at 23:23
It probably isn't for the example markup but if, for example, the markup contained a lot of tags it would try and load all of the images. – drs9222 Apr 11 '15 at 23:27
why not just use a non-js script type attrib and avoid the comments altogether? the – dandavis Apr 11 '15 at 23:57
I wasn't sure how well a different type attribute would be handled across browsers and I admit I didn't know about the – drs9222 Apr 12 '15 at 00:05
@dandavis you mean like text type script? I would also try the template tag. – Angel Angeles III Apr 12 '15 at 00:31
` – dandavis Apr 12 '15 at 00:35

score 0 · Answer 2 · answered Apr 11 '15 at 22:27

0

Say you have have

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

On your CSS, you would have:

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

On your JavaScript you could have something like:

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

What do you think?

answered Apr 11 '15 at 22:27

Erick

823
16
37

I don't want the code to load at all as it will slow things down. Setting it to display none doesn't help that situation. – Angel Angeles III Apr 11 '15 at 22:28

score 0 · Answer 3 · answered Apr 12 '15 at 06:20

Thanks to @drs9222 I have finally found a way to do this. I will answer my own question for so that future readers will know what I have done to solve my problem. Also thanks to @dandavis for giving my an idea on using script type="text/plain". This is my answer.

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

This code will not get in the way of loading other elements except for the code itself.

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

3 Answers3