Hide element or create on the fly? [closed]

Question

Which option is best:

• Have an element in the markup, hidden with CSS. If JS is enabled, show that element.

• Have no element in the markup and create it on the fly, if JS is enabled.

If the user doesn't have JS, I don't want a div to be shown. My question isn't how to code the different cases, it's which is the best and why.

EDIT: When I say "best" I mean support your answer with why it's the best for you. Can be speed/semantics/etc. What I want is to be able to have a better look at the pros and cons of each one. Also the speed is hardly an issue because it's only one element so it would be like milliseconds.

For the first option, it's probably faster, but then we have unnecessary markup and CSS rules. Because if there is no JS, there would be no point in having the element at all, much less hiding it.

Now the second option, even though it might not be as fast, I keep the different parts separate and only really load what has to be loaded.

Answer 1

DOM manipulations are the most expensive. Showing existing code is faster than injecting it.