How can i separate HTML from Javascript/jQuery?

Question

I have a forum, and on every persons post theres a button that allows a moderator to mute someone after reviewing the post/entering hours to mute for in a window using simplemodal. In the code that shows the window, I have long code like

var output = "<div id='msginfo'>...</div>";

and so on. I would like my code to be able to be 'minified' when I'm done with it and a lot of packers/shrinkers crap out when it comes to the html (usually the < and "> stuff.).

How do other web applications manage no HTML in javascript files? are the divs that will be shown just hidden until they're needed or what?

I would hide the divs until they are needed

Enrico
– Enrico

2012-11-28 20:39:43 +00:00
Commented Nov 28, 2012 at 20:39 — Enrico
– Enrico, Commented Nov 28, 2012 at 20:39

Mark Amery · Accepted Answer · 2012-11-28 20:57:29Z

4

At work, I use ICanHaz for this. It lets you generate DOM elements on the fly from HTML templates (which you can include in the <head> of your HTML file) without having to inline any HTML whatsoever in your Javascript where it's ugly and harder to read.

For a purpose like yours - displaying a modal with a fixed layout - this is probably cleaner than having the modal included and hidden on the page the moment it loads, although there's probably nothing horribly wrong with the latter solution either in this case.

Incidentally, ICanHaz is also a nice solution when you want to asynchronously add content to the page after it has loaded, which may be relevant in a forum context (for e.g. loading new posts without a new page load).

edited Nov 28, 2012 at 20:57

answered Nov 28, 2012 at 20:44

Mark Amery

158k93 gold badges435 silver badges476 bronze badges

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

Comments

JorgeeFG · Accepted Answer · 2012-11-28 20:47:05Z

1

I usually put on divs: display:none property for hide it then change that with Javascript when needed, so they will be shown.

On the other hand you can make an Ajax call and get the html you need and display appending it to an element.

answered Nov 28, 2012 at 20:47

JorgeeFG

6,06114 gold badges65 silver badges103 bronze badges

Collectives™ on Stack Overflow

How can i separate HTML from Javascript/jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related