Is There a Best Practice for Generating HTML with JavaScript

Is there a best practice for generating html with javascript

Options #1 and #2 are going to be your most immediate straight forward options, however, for both options, you're going to feel the performance and maintenance impact by either building strings or creating DOM objects.

Templating isn't all that immature, and you're seeing it popup in most of the major Javascript frameworks.

Here's an example in JQuery Template Plugin that will save you the performance hit, and is really, really straightforward:

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
url: jsonObj.url,
name: jsonObj.name
});

I say go the cool route (and better performing, more maintainable), and use templating.

Best practice - pre-write HTML in document with display:none, or create with JS?

I'll try to address this question as good as I can.

1 - As I said in the comments, Avoid inline styling.
First and foremost this is because inline styling voilates DRY.
Having to repeat the same thing over and over again for this is very bad for maintenance and for developing since instead of changing code once you have to change it at ~100 places.

2 - Avoiding inline styling is also good for accessibility, some screen readers and search engine crawlers do indexing work and reading work based on css selectors and thusly using inline styling will force them to either ignore or misintrepret things.

3 - When working as developers it's easy to do inline styling "just for the fun" but what you're actually doing is mixing concerns. HTML is the content and CSS is the design.
Mixing these two usually leads to headaches and making my job as a developer that comes after you a pain in the effin ass since I have no idea what's styled and how.

Now, onto performance.

When you use inline styles, what you're telling the browser is basically "hey, for every page page view apply these styles to all of these elements." Now, this just became really apparent why this is bad.
You have no ability to cache and store your css and basically forces the browser to rerender your styles every time. Using an external CSS file will actually help you speed up your site since the browser caches it.

That was that for the css part.

The javascript you had asked about.

As I said, hide things with css and show with javascript. Now why do you want to do this instead of pulling everything in?
Well, you can do both. If you're only a webbrowser experience then you can do either, it doesn't matter. I myself prefer to have stuff in the DOM because it relates to content and if you're a large app having dozens of dozens of ajax calls will only make it harder for maintenance. I believe if you have to ajax stuff in make sure it counts and is logical and not just for the kicks (I think this applies if only you have jQuery and plain javascript at your disposal).

If you're working with backbone.js, for example, it's based on views and introduces some form of "MVC" into your frontend enabling you to have views with subviews that can pull content in from the server.

Hope that helps a bit with making a decision! :)

JavaScript HTML injection efficiency/best practice

If your project can manage it, it could be better to create DOM Elements and append them to the tree.

The big problem with efficiency would be that setting .innerHTML property would first remove all the nodes and only then parse the html and append it to the DOM.

It's obvious that you should avoid removing and the re-appending identical elements, so if you're sure the "Example" elements would always remain on the page, your way of setting them seems to be a nice optimazation.

If you want to optimize it even further, you could parse the html you want to append to nodes and have a function that checks which ones should be appended and which one shouldn't. But be aware that accessing the DOM is costly. Read more about the ECMA-DOM bridge.

Edit: In some cases it might be better to let the browser do the html parsing and injecting through innerHTML. It depends on the amount of HTML you're inserting and the amount you're deleting. See @Nelson Menezes's comments about innerHTML vs. append.

What is the best practice using Dynamically generated forms or html imput tags

It depends.

The main advantage to doing it server-side (jsp in your case) is that your forms remain accessible if the user has turned off javascript or your javascript is broken.

Integrations tests which test your forms will also run faster if you do not need to run a (headless) browser with a full javascript runtime.

However, single-page applications are by nature javascript-heavy. The server often only serves a simple html skeleton which is then populated by javascript. An advantage to this approach is that web apps can be made to feel very responsive since there is a minimal document and the user can start interacting which the page even as it loads.

Good practices for writing HTML in Javascript

http://ejohn.org/blog/javascript-micro-templating/ is a devilishly brilliant hack for this. End result is very clean.

Best practice for creating multiple HTML blocks dynamically

Since you're not using SPA approach (an example explaining that: with angular). The best (cleanest/fastest) option (in my opinion) is to fully render the blocks from the server side (you're using PHP apparently). Meaning that you'll have a file defining a single block structure of an appointment 'appointment.php' which holds the template + rendering logic, this 'appointment.php' result (after rendering) then you'll be calling (loop) in the page you need it in, as many times as you wish and with the parameters you wish, for each instance of the appointments list you have

JavaScript: How should I generate a lot of HTML?

Create snippets as templates, put them into an invisible <div>:

<div style="display: none">
<div id="template1">
<h2 class="header_identifyingClass">Hello from template</h2>
</div>
<div id="template2">
<span class="content">Blah blah</span>
</div>
</div>

Then find it,

document.getElementById("template1"); 

fill it's internal values, e.g. find inside elements by XPath or jQuery and fill them e.g. using element.innerHTML = "Hello from new value", and move or copy it to the visible part of DOM.

Create multiple templates and copy it multiple times to generate many.
Don't forget to change the ID for copies to keep it working.

PS: I think I used this approach in the code of JUnitDiff project. But it's buried in XSLT which serves another purpose.



Related Topics



Leave a reply



Submit