Good way to store HTML in a Javascript Variable That's Fully Readable

Question

I'm trying to store HTML in a Javascript Variable so that it's easy to read and edit in the future.

I've done this:

var form = [
    "<fieldset>",
    "  <label></label>",
    "</fieldset>" ].join("\n");

Only thing is I want it to be easier than that to edit in the future, possibly store it in a variable in PHP (if that's any easier) and then encode it or something.

There is going to be a whole lot more HTML then that

Why not just store it in a `.html` file, and read it in from that file into your program? — Travis Webb, Apr 25 '12 at 18:01
you can try using HTML5 web-storage http://www.w3schools.com/html5/html5_webstorage.asp — COLD TOLD, Apr 25 '12 at 18:01

score 1 · Accepted Answer · answered Apr 25 '12 at 18:08

1

In PHP variable:

$form =<<<FORM
<fieldset>
    <label></label>
</fieldset>
FORM;

http://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

answered Apr 25 '12 at 18:08

Anthony

71
4

score 0 · Answer 2 · answered Apr 25 '12 at 18:03

If the PHP option you mentioned is the way you want to go, one option (that's very readable and easily editable) would be something like:

$out = '<div>';
    $out .= '<p>Hello, World</p>';
$out .= '</div>;

The largest advantage (I think) is that this allows you to indent freely for readability. Obviously a very simple example, but hopefully the point gets across.

score 0 · Answer 3 · edited May 23 '17 at 10:34

0

You can write multi-line strings by adding backslashes to each line:

Creating multiline strings in JavaScript

edited May 23 '17 at 10:34

Community

1
1

answered Apr 25 '12 at 18:03

garious

91
3

score 0 · Answer 4 · answered Apr 25 '12 at 18:18

I would use jQuery templates.

http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/

Your example:

<script id="myTemplate" type="text/html">
    <fieldset><label></label></fieldset>
</script>

Additionally, the templates allow you to add in variables, for example:

<script id="myTemplate" type="text/html">
    <fieldset><label class="${labelclass}">${label}</label></fieldset>
</script>

You pass in the information as an array

var templateData = [
    { labelclass: "fruit", label: "orange" },
    { labelclass: "vegetable", label: "cucumber" },
    { labelclass: "animal", label: "dog" }
];

Then you can append to where you want

$("#myTemplate").tmpl(templateData ).appendTo( "form" );

You don't have to use the variables, but it's much cleaner than trying to construct it manually.

Good way to store HTML in a Javascript Variable That's Fully Readable

4 Answers4