Including HTML in javascript

Question

I've to use loads of textin javascript as templates. Its too bad (I know). However, when I fetch the results through Ajax/PHP/JSON, it was elegant but made the fetching of results a little slow. I was displaying the matter in a popup. So again I'm back to templates. My question is: "Is there any tool that can automatically parse the HTML code into javascript".

Example: In HTML, the following code

<ul class="tabs">
    <li><a href="#" name="#tab1">Introduction</a></li>
    <li><a href="#" name="#tab2">Round</a></li>
    <li><a href="#" name="#tab3">Rules</a></li>
</ul>

becomes in javascript as:

'<ul class="tabs">'+
    '<li><a href="#" name="#tab1">Introduction</a></li>'+
    '<li><a href="#" name="#tab2">Round</a></li>'+
    '<li><a href="#" name="#tab3">Rules</a></li>'+
'</ul>'+

Are there any other ways?

Somewhat related: look at the source of Facebook, and you will see that they include what appear to be templates inside <code> elements. Presumably this is so they don't have to include the HTML as a string inside their scripts, nor do they need to request it from the server. — Tim M.
– Tim M., Commented Jan 14, 2013 at 18:10
@TimMedora: Can you please provide me with a tutorial of how to load hidden div content through jQuery/javascript? — xan
– xan, Commented Jan 14, 2013 at 18:12
What's bad about using <script> tags? If you can't precompile your templates (really the optimal thing, I think), then <script> tags with a non-JavaScript "type" are fine. — Pointy
– Pointy, Commented Jan 14, 2013 at 18:18
After looking at different template solutions, EJS was easily the best as it didn't require you to learn anything more than JavaScript syntax. EJS allows remote loading of content as well as through local script tags with type=text/html. Your point about script is not understood as its not actually script when using type=text/html and is ignored by the browser in terms of parsing script or dom. — King Friday
– King Friday, Commented Jan 14, 2013 at 18:28

Louis XIV · Accepted Answer · 2013-01-14 18:09:50Z

0

Put you content in an hidden div and load it with .html() method of jquery.

answered Jan 14, 2013 at 18:09

Louis XIV

2,22413 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Salta · Accepted Answer · 2013-01-14 18:14:26Z

0

<button>Show it</button>
<p style="display: none">Hello 2</p>

$("button").click(function () {
    $("p").show("slow");
});

http://api.jquery.com/show/

answered Jan 14, 2013 at 18:14

Brian Salta

1,5741 gold badge10 silver badges19 bronze badges

Comments

Tim M. · Accepted Answer · 2013-01-14 18:20:39Z

0

Here's an example of how to do it using hidden <code> elements. Facebook does this extensively.

HTML:

<div>here is some normal content</div>
<code class="template" id="template1"> 
  <div>this is a template</div>
</code>

<div id="renderedTemplate"></div>

Script:

var template = $("#template1").html();
var templateOutput = $("#renderedTemplate");

for( var i = 0; i < 10; i++ ){
    templateOutput.append(template);  
}

CSS:

.template {
  display: none;
}

However, since you aren't Facebook, make your life easier and use something like Handlebars as @Shmiddty suggested. It uses a similar approach, but adds powerful templating capabilities into the mix, rather than verbatim string insertion.

answered Jan 14, 2013 at 18:20

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

Collectives™ on Stack Overflow

Including HTML in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related