Home » Html » how to assign a block of html code to a javascript variable

how to assign a block of html code to a javascript variable

Posted by: admin November 29, 2017 Leave a comment

Questions:

what is the syntax to store a block of html code to a javascript variable?

<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>

I want to assign the above code to a variable ‘test’

var test = "<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>";

but it does not work, which are the correct syntax for assigning the code?

TIA

Answers:
 var test = "<div class='saved' >"+
 "<div >test.test</div> <div class='remove'>[Remove]</div></div>";

You can add “\n” if you require line-break.

Questions:
Answers:

Greetings! I know this is an older post, but I found it through Google when searching for “javascript add large block of html as variable”. I thought I’d post an alternate solution.

First, I’d recommend using single-quotes around the variable itself … makes it easier to preserve double-quotes in the actual HTML code.

You can use a backslash to separate lines if you want to maintain a sense of formatting to the code:

var code = '<div class="my-class"> \
        <h1>The Header</h1> \
        <p>The paragraph of text</p> \
        <div class="my-quote"> \
            <p>The quote I\'d like to put in a div</p> \
        </div> \
    </div>';

Note: You’ll obviously need to escape any single-quotes inside the code (e.g. inside the last ‘p’ tag)

Anyway, I hope that helps someone else that may be looking for the same answer I was … Cheers!

Questions:
Answers:

I recommend to use mustache templating frame work. https://github.com/janl/mustache.js/.

<body>
       ....................
       <!--Put your html variable in a script and set the type to "x-tmpl-mustache"-->
       <script id="template" type="x-tmpl-mustache">
           <div class='saved' >
           <div >test.test</div> <div class='remove'>[Remove]</div></div>
    </script>
</body>

  //You can use it without jquery.
  var template = $('#template').html();
  var rendered = Mustache.render(template);
  $('#target').html(rendered);

Why I recommend this?

Soon or latter you will try to replace some part of the HTML variable and make it dynamic. Dealing with this as an HTML String will be a headache. Here is where Mustache magic can help you.

<script id="template" type="x-tmpl-mustache">
 <div class='remove'>  {{ name }}! </div> ....
</script>

and

 var template = $('#template').html();
 // You can pass dynamic template values
  var rendered = Mustache.render(template, {name: "Luke"});
  $('#target').html(rendered);

There are lot more features.

Questions:
Answers:

we can use backticks (“) without any error.. eg: <div>"test"<div>

we can store large template(HTML) inside the backticks which was introduced in ES6 javascript standard

No need to escape any special characters

if no backticks.. we need to escape characters by appending backslash()
eg:” \”test\””

Questions:
Answers:

Just for reference, here is a benchmark of different technique rendering performances,

http://jsperf.com/zp-string-concatenation/6

m,