when it's acceptable to output HTML code from Javascript?

Question

I read a piece of Javascript code, where the programmer added something similar to this:

html = " 
        <div class='hidden-context-menu'>
          <ul><li><a class='select-all'>All</a></li>
              <li><a class='select-none'>None</a></li>
               ...
               ...
               ...
          </ul>
        </div>
 "

and then, in some other parts of the webapp, this piece of code is used and rendered in the page.

output_html(html);

I assume, considering this specific example of a hidden context menu, that maybe the developer did't want to repeat himself..

Is this kind of practice encouraged or it has to be considered a wrong approach?

your example is not MUCH different than instantiating and appending / prepending elements via js objects. I guess the determining factor is the volume of html that the string contains and whether that structure can be easier defined via js objects and some loop process or not? /2cents edit: my main concern would be SEO implications — Brandt Solovij
– Brandt Solovij, Commented Mar 7, 2012 at 17:54
I'd say it's better to keep the HTML separate from the javascript as much as you can (sometimes it's hard to stick to this rule). — m1.
– m1., Commented Mar 7, 2012 at 18:00
I haven't done tests in years, but also last time I tried it was about 10x faster to build a DOM through the HTML parser than to call document.createElement a bunch of times. Something to keep in mind if you're creating thousands of nodes perhaps. — Mike Christensen
– Mike Christensen, Commented Mar 7, 2012 at 21:53

Travesty3 · Accepted Answer · 2012-03-07 17:57:31Z

2

I would say that relying on Javascript to generate your HTML is probably a bad idea. What if the user has Javascript turned off in their browser?

I think that it is more common to find HTML generated by a server-side script, like PHP. The resulting page that the client receives is the same as it would be if PHP wasn't used, and the developer just typed out the HTML repeatedly.

answered Mar 7, 2012 at 17:57

Travesty3

14.5k7 gold badges64 silver badges103 bronze badges

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

5 Comments

Jeffrey Sweeney Over a year ago

For dynamic webapps, outputting html is fine. To put it all in a string however seems very counterintuitive when functions exist for element creation.

Diodeus - James MacFarlane Over a year ago

Newer-generation frameworks, such as EXT.JS render all of the UI client-side using JavaScript.

Travesty3 Over a year ago

@JeffreySweeney: I think using element creation when necessary is fine, but I don't think it's a good idea to use it when the exact same functionality can be achieved by simply typing out the HTML. Again, I ask...what if the user has Javascript turned off in their browser? Then the element will not be generated, whereas if they just typed it out, it would have been. And the functionality to the client would be exactly the same.

Jeffrey Sweeney Over a year ago

@Travesty3 agreed. It's right up there with Flash-only websites.

Chris Sobolewski Over a year ago

Best practices dictate that your website should work no matter what, and javascript can be used to sweeten the experience. There is never a reason, aside from laziness, budgets, or your damndable marketing department not understanding and giving you time to do otherwise.

Jeffrey Sweeney · Accepted Answer · 2012-03-07 18:14:10Z

2

Outputting HTML in this fashion can lead to a lot of headaches in the future, for the same reason CSS should be external: harder to find, mixes with unrelated code, and often results in needless repetition.

If the framework you're told to use requires it, or if a former developer riddled the code with it, there really isn't too much that can be done.

Edit: the following code will perform the same function, and is easier to manipulate in the future:

var div = document.createElement("div");
div.className = "hidden-context-menu";

var ul = document.createElement("ul");

var li = document.createElement("li");
var a = document.createElement("a");
a.className = "select-all";
li.appendChild(a);
ul.appendChild(li);

var li = document.createElement("li");
var a = document.createElement("a");
a.className = "select-none";
li.appendChild(a);
ul.appendChild(li);

div.appendChild(ul);

And by the way, as the above poster said, Javascript should not be the only mechanism for outputting HTML; the HTML page should be responsible for that! It's fine in 'webappy' applications, however.

edited Mar 7, 2012 at 18:14

answered Mar 7, 2012 at 17:58

Jeffrey Sweeney

6,1545 gold badges27 silver badges32 bronze badges

1 Comment

Evert Over a year ago

another benfit of this method is that the created elements will be accessible if you need to traverse the DOM, and they won't be in the OP's code.

Joe · Accepted Answer · 2012-03-07 21:03:16Z

What absolutely horrible code ... they should've used a better variable name than 'html'.

As for being the wrong approach -- there are issues in some browsers w/ direct modification if it's an XHTML page. If it's not being dynamically generated, you're often better off inserting it in with the rest of the HTML, and using CSS to hide/show it when needed.

For drilldown menu type functionality, I typically leave it showing with the initial CSS, but then have JavaScript hide it on page load -- this way, if JS is off, they just have fully expanded menus, rather than no access to the lower level stuff. If you make it so the manu section related to the current page is expanded, you don't have to do this, it just means more clicks as they go to each page to get to the content they're looking for.

In your case, as there's no 'href' for the anchors, I'm guessing that those elements are only functional when JavaScript is turned on, so I really see no problem with it being inserted via JS. (and as for inserting HTML vs. doing it by element ... if it's HTML, and not XHTML, I have no problem with inserting a string, as I find it easier to maintain ... and if it's going to be actually in the HTML file, I say there's even more reason to keep it as a string of HTML)

Collectives™ on Stack Overflow

when it's acceptable to output HTML code from Javascript?

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related