How to optimize the creation of long html code to be used in javascript string

Question

I need to define javascript variables containing very long html code.

Here is a short example:

var text = "Select one item:<br>";
text += "<ul class='thumbnails'><li class='span3'><a href='#' class='thumbnail'><img src='http://placehold.it/260x180' alt=''></a></li></ul>";

Since the html is going to be much much longer, I would rather work in pure html rather than append text to a javascript string.

I thought of creating a separate html file, but I guess that would require an Ajax call to fetch its content. What is the best way to deal with this?

Fabrizio Calderan · Accepted Answer · 2012-08-10 10:38:55Z

1

As N.Zakas said on "maintainable javascript" book, you should «keep html out of javascript» to promote high mantainability of the code through loose coupling of UI layers.

Beside the ajax solution you could also place the markup as a comment in the html file and read it via javascript (as a regular DOM node) or you could use some kind of microtemplating system (e.g. handlebars) and place your markup in a script block (the idea is to put markup where is expected to be found and not into javascript logic)

answered Aug 10, 2012 at 10:38

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

Comments

Sam Peacey · Accepted Answer · 2012-08-10 10:39:17Z

1

One possible solution is to use templates. There are a few JavaScript libraries that provide templating, underscore.js is one: http://underscorejs.org/#template, or more details on how to use it for templating http://www.headspring.com/blog/developer-deep-dive/an-underscore-templates-primer/

Plus underscore is great for a number of other things.

answered Aug 10, 2012 at 10:39

Sam Peacey

6,0341 gold badge28 silver badges27 bronze badges

Comments

Ben Parsons · Accepted Answer · 2012-08-10 10:39:48Z

0

You could break up the text into actual HTML objects.

var thumbnailsUL = document.createElement('ul');
for (index in {your-thumbnails-list}) {
  var thumbnail = document.createElement('li');
  thumbnail.innerHTML = {whatever you need, more objects or html as text};
  thumbnailsUL.appendChild(thumbnail);
}

Ideally though, there is no reason to build this IN JavaScript - can you not emit it from the server?

answered Aug 10, 2012 at 10:39

Ben Parsons

1,4431 gold badge14 silver badges31 bronze badges

Comments

Michael Gaskill · Accepted Answer · 2016-05-19 01:36:24Z

0

Instead of constructing HTML in Javascript as a string, I would rather suggest you to emit those html elements in the page itself and hide while loading. Then in Javascript, you could select that container and display it.

edited May 19, 2016 at 1:36

Michael Gaskill

8,06210 gold badges40 silver badges46 bronze badges

answered Aug 10, 2012 at 10:38

sundar

1,78012 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to optimize the creation of long html code to be used in javascript string

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related