0

So I'm creating a button that adds a new <div> to a group of <div> tags. It's a fairly complex <div> with a lot of configuration options that ends up being around 30-40 lines of code.

My questions is basically should I store that HTML for the stock <div> as a Javascript variable or hide it in the DOM and reference the <div> via jQuery and set the contents to a variable. There will be a lot of this kind of code in my page so I feared generating tons of HTML with Javascript 

var item_html = 
    '<div>'+
      .... 30-40 lines of code .....
    '</div>';
$('new_item').on('click',function(){
  $('#Container').append(item_html);
});

OR

$('new_item').on('click',function(){
  $('#Container').append($('#new_item_html').html());
});
randominstanceOfLivingThing
  • 16,873
  • 13
  • 49
  • 72
DigitalMC
  • 805
  • 2
  • 16
  • 31
  • 2
    You might want to consider using a script block with type of `text/template`, that way the HTML isn't a bunch of hard to maintain concatenated strings. You can use an existing templating engine or roll your own if the content is customized based on other variables http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script – Paul Abbott Aug 16 '16 at 20:00
  • 1
    Instead storing a lot of text representing HTML nodes, you could use a Template Engine, [HTML5 native](https://developer.mozilla.org/en/docs/Web/HTML/Element/template) or a library such as **[handlebars.js](http://handlebarsjs.com/)** which is used by frameworks as **[Ember](https://guides.emberjs.com/v1.10.0/templates/handlebars-basics/)**. The advantages are among others, maintainability, clear code / legibility, decoupling, and reusability. – jherax Aug 16 '16 at 20:08
  • I don't really want to introduce a new JS library right now but that is good to know for new projects moving forward. I'm glad to know this exists. The `text/template` idea is interesting. Is this the same as the ` – DigitalMC Aug 16 '16 at 21:03

3 Answers3

1

I would recommend storing it in a variable. That way you are not loading unnecessary html that would only be viewed if a user chooses to click on a link.

Denis Kumbaradzi
  • 294
  • 1
  • 7
1

There are actually many plausible solutions to this. Some JavaScript frameworks have come up with their own solutions, which are complex internally but easy to use.

One that I like is placing them inside <script> tags. HTML5 has a custom mechanism for this, but essentially you would place this inside your head:

<script type="text/html/imadeupthistype">
  <div>Etc</div>
</script>

The type is important there - as long as it is present and is not of type "text/javascript" then the browser will know it is a type it doesn't recognize, and will not try to parse it as such. It also will treat the inside of the tag like custom data - so it only knows its contents as a big text block. You can then retrieve this content if you add an ID to the script, or refer to it in some other way.

If you have a library to process the asynchronous logic, you can also place large segments of HTML in their own template files, which your javascript loads before running. Some frameworks make this easier, so it might be best not to reinvent that wheel. The advantage of this approach is that your IDE will then recognize it as HTML by its extension, and apply syntax highlighting and note errors.

Katana314
  • 8,429
  • 2
  • 28
  • 36
1

Use the HTML5 template-element. I believe this is the exact reason why it was introduced: https://developer.mozilla.org/en/docs/Web/HTML/Element/template

yvanavermaet
  • 348
  • 1
  • 9
  • So from my research this is "technically" the right answer... but since it's not supported yet by IE It's not the "Best" answer. This was really cool to know though. Thanks for the tip! – DigitalMC Aug 16 '16 at 21:14
  • @DigitalMC It's true that it's not supported by IE, but there it just reacts as a normal HTML-element. You could easily place a display: none on it and use it in all browsers. Edit: fyi, we're using this on production sites with support of IE9 and up. – yvanavermaet Aug 16 '16 at 21:32
  • Gotcha, so just write some CSS `template {display:none}` and that would make sure it's hidden? – DigitalMC Aug 16 '16 at 21:47
  • 1
    @DigitalMC Correct. That's all there is to it. It's much cleaner than creating script-tags with a custom type + it's future proof. All main browsers (except IE and Opera mini) seem to have full support: http://caniuse.com/#feat=template and the others just rely on the display: none part. – yvanavermaet Aug 16 '16 at 21:53