5

While designing html interface elements it's a pretty common scenario having DOMs show/hide depending on certain events. My question is simple, but every time I run into this I always wonder: is it "better" to have the elements hardcoded in the html and simply switch the display attribute (eg with .show/.hide) or dynamically add/remove them as needed via JS? Both are trivial to implement but I can't help but wonder how do they compare and whether there's any advantage/drawback of using one over the other.

There are cases, such as when the same element is used verbatim in several places, where it seemingly makes sense to create the DOMs dynamically as you go, but on the other hand hardcoding them theorically is more maintainable in that you can move the DOMs around and change them as you need and they will work as expected as long as the selector is still the same for jQuery. Generally speaking from a designer prespective it seems like hardcoding is the way to go, but I look forward for thoughts and perhaps things I may be overlooking here.

Edit: By "hardcoded" I meant elements that are not inserted via JS at all; that is, elements that have their position already designated within its parent document in the original html markup rather than by JS.

Improve this question
4
  • All things being equal, showing or hiding an element is faster than adding it to or removing it from the DOM. Also, you can "hardcode" markup in fragments that are fetched dynamically by scripts, so the line between "dynamic" and "hardcoded" becomes blurry here. (Downvote is not mine, btw.) Commented Jul 4, 2012 at 18:33
  • Pretty much depends in what kind of interaction you will code, as designer too, I can tell you that sometimes a css solutions is better than a jquery one and viceversa, but I think, most of the time, jQuery is a better option simply because of old browsers compatibility. Commented Jul 4, 2012 at 18:35
  • I have put an up vote to cancel it Commented Jul 4, 2012 at 18:36
  • @Frédéric Hamidi fair point, I have clarified what I meant with "hardcoded" in the original question. As for the speed I was suspecting it but it's great to hear it nonetheless. Commented Jul 4, 2012 at 18:43

2 Answers 2

Reset to default
3

Ultimately, it really depends on what you're working with and what your application does, but:

  • Static markup means more work for the server (but only if the page is generated dynamically in the first place, for static pages the effect is negligible).

  • Dynamic markup means more work for the client, which is not always a bad thing, depending on your target audience.

Technically, however, Graceful Degradation suggests that static markup is the way to go, as ideally the page should remain usable with scripting disabled (dynamic markup being an optional layer above a working static core).

On the other hand, Progressive Enhancement builds from there and basically says that since we're already working with a bare-bones core, we can fire on all cylinders client-side, and dynamically enhance the static markup with content that takes advantage on the latest browsers' technologies.

For instance, jQuery UI and jQuery Mobile are designed around progressive enhancement, as their strategy is to extend existing markup with richer client-side behavior, generally exposed through dynamically created elements.

So, both options in your title can and arguably should be implemented together. In the general case, and if possible, rendering the markup necessary for your application to work on a scriptless platform, then enhancing that markup from the client side looks like a good idea.

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

Comments

2

performance needs to be considered when working on bigger apps, and when there is no much performance concern while coding smaller ones do what you feel easy and manageable. Very big DOM might kill mobile browsers. A lot of DOM modification can affect performance. In bigger applications it is better to keep DOM light and also reduce DOM modifications. So in a nutshell it's kind of convenience over convention when performance is not closely watched. it is but always recommended to keep a watch on performance and good practices.

Improve this answer

Comments

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.