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());
});
Improve this question
3
  • 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 stackoverflow.com/questions/4912586/… Commented Aug 16, 2016 at 20:00
  • 1
    Instead storing a lot of text representing HTML nodes, you could use a Template Engine, HTML5 native or a library such as handlebars.js which is used by frameworks as Ember. The advantages are among others, maintainability, clear code / legibility, decoupling, and reusability. Commented Aug 16, 2016 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 <template> solution? Commented Aug 16, 2016 at 21:03

3 Answers 3

Reset to default
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

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

4 Comments

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 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.
Gotcha, so just write some CSS template {display:none} and that would make sure it's hidden?
@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: caniuse.com/#feat=template and the others just rely on the display: none part.
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.

Improve this answer

Comments

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.

Improve this answer

5 Comments

So is this solution essentially the same as the <template> solution?
Yes. I wasn't sure how widely available the official, standardized <template> solution was, but my somewhat old version of the same approach is available in all browsers including old IE versions (which I happen to support at my 9-5 job)
Yeah I think this is the winner. Thanks so much for the suggestion!
Hey this was totally good but I think the HTML5 option might be the most correct. This is super awesome though.
@DigitalMC No problem. The longest answer certainly isn't always the most correct/useful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.