How to store a HTML snippet and insert it later in the document?

Question

Is there a way to store a HTML snippet in a variable using Javascript or jQuery like this? (obviously it's a non-working an example)

var mysnippet = << EOF
<div class="myclass">
  <div class="anotherclass">
    Some dummy text
  </div>
</div>
EOF

And then insert it in the document using jQuery:

mysnippet.append($('#someelement'));

EDIT:

Please, read this before answering of commenting: What I have is a raw HTML snippet inside my JS file, and I need to store it in a Javascript variable using something like that EOF construction. I need to avoid putting it between quotation marks.

If it's not possible using Javascript and/or jQuery, then the question has no solution.

Exum

$(mysnippet).append(#someelement) – Septuple

Since no sensible file editor or linter would highlight your js file correctly, I am sure it is always better to put the HTML in a separate .html file, and then read it with $.get("mysnippet.html"). You then have the flexibility to edit the DOM of the new object before appending it. Further, the HTML and JS can be linted easily. Also it separates data from code, which is always a good thing for future-proofing. – Rabbet

Answer 1

You could use javascript templates like ejs and haml-coffee.

Granoff

I'm marking your answer as the valid one as it seems to be the only way to do what I need. Using erb for example (Rails templating language) I can render an external HTML snippet code and escape it with a Rails helper, so I can finally store it in a variable to append it to the document. – Exum

Answer 2

Just get the HTML code of the div you want by var content = $('#somediv').html(); and then append it to some div later on ! $('#otherdiv').append(content);

$().html(); delivers the HTML Content of that div. documentation: http://api.jquery.com/html/

$().append(<content>); appends the Content to a special div. documentatoin: http://api.jquery.com/append/

Occupation

The HTML code I want to append needs to be in the format I have written down in my question. It doesn't exist in the document yet. – Exum

Answer 3

You could write:

var mysnippet = "<div class='myclass'>"+
  "<div class='anotherclass'>"+
    "Some dummy text"+
  "</div>"+
"</div>";

and then insert is using the append function (which takes the snippet as argument).

Spitfire

Answer 4

Yes. Fiddle example

JavaScript

var html = '<b>Bold</b>'
$('.anotherclass').append(html);

HTML

<div class="myclass">
  <div class="anotherclass">
    Some dummy text
  </div>
</div>

Bowerman

Answer 5

A modern solution is to use template literals (backticks), for example:

var mysnippet = `
<div class="myclass">
  <div class="anotherclass">
    Some dummy text
  </div>
</div>`;

Morocco

Answer 6

Unfortunately nothing like << EOF is available. Here's one solution:

$el = $('<div />')
  .addClass('myClass')
  .append(
    $('<div />')
      .addClass('anotherclass')
      .text('Foo Bar')
  );

Waneta

Answer 7

Thinking on the same issue I have found this discussion. What I have in mind is to put a hidden textarea, containing the html, and then retrieving the html from there.

Thus there will be no conflicts with doubled DOM ids, since textarea content isn't rendered as html.

Odometer

Answer 8

For those who come across this as I have... You may wish to use the new <template> tag in HTML5. It still doesn't store the HTML in the JavaScript unfortunately :(

Ferrite