How can I write HTML code only if JS is enabled?

Question

Possible Duplicate:
Is there a html opposite to noscript

<noscript> makes it easy to have HTML code as a fallback if JS is disabled... but what if I want to have HTML code which is only shown when scripts are enabled? I can have a JS block which dynamically writes HTML, but is there a nicer way to do it using some regular HTML?

let's say I have a link:

<a href="test.com">This should only appear if Javascript is enabed</a>

duplicate of this question: http://stackoverflow.com/questions/30319/is-there-a-html-opposite-to-noscript — codecraft, Mar 03 '11 at 13:33

score 12 · Answer 1 · answered Mar 03 '11 at 13:33

12

Use a HTML element with style="display:none", set that to display:block from JavaScript.

Sample code (ugly as hell, but just to give you the idea)

<div id="hideThisFromNonJs" style="display:none">
Bla bla bla
</div>

<script type="text/javascript">
document.getElementById('hideThisFromNonJs').style.display='block';
</script>

answered Mar 03 '11 at 13:33

Sean Patrick Floyd

292,901
67
465
588

In general I'm against [mixing CSS in your HTML](http://phrogz.net/CSS/HowToDevelopWithCSS.html#separatestyle). I can't decide if this is appropriate in this case or not, though. – Phrogz Mar 03 '11 at 13:35
4

@Phrogz Very valid remark. How about `
` with the `hidden` class defined as `display:none` in an external style sheet. The JS would just remove the class.
– Sean Patrick Floyd Mar 03 '11 at 13:37
1

Yup, that'd be good, and more general than your or my current (simpler to implement) answers involving ID only. I do find [this answer](http://stackoverflow.com/questions/30319/is-there-a-html-opposite-to-noscript/431554#431554) interesting, though. – Phrogz Mar 03 '11 at 13:40

score 3 · Answer 2 · answered Mar 03 '11 at 13:32

3

I can have a JS block which dynamically writes HTML, but is there a nicer way to do it using some regular HTML?

Unfortunately, no, there isn't. You have to use some form of JavaScript.

I guess you could set up a class or something that is hidden by CSS:

<span class="jsonly">etc</span>

And then you could run something like:

$('.jsonly').show();

answered Mar 03 '11 at 13:32

Matt

43,482
6
101
102

@Pointy The reason I quoted was because I was specifically talking about "using some regular HTML" - I've expanded the answer to avoid confusion – Matt Mar 03 '11 at 13:36
OK, well now that you've modified the answer, it looks like what everybody else is saying :-) - I didn't downvote but now I'll upvote – Pointy Mar 03 '11 at 13:38
I'll downvote because this is jQuery, not Javascript. If edited to be Javascript, it would be identical to other answers. – TheThirdMan Aug 29 '17 at 10:02

score 3 · Answer 3 · answered Mar 03 '11 at 13:33

3

<style type="text/css" media="all">
  #test { display:none }
</style>
...
<a id="test" href="test.com">...</a>
...
<script type="text/javascript">
  document.getElementById('test').style.display = 'inline'; // or 'block', or whatever.
</script>

answered Mar 03 '11 at 13:33

Phrogz

296,393
112
651
745

score 0 · Answer 4 · answered Mar 03 '11 at 13:34

0

We appoached this by giving the elements a css class that styles them as display:none and showing it with JS.

answered Mar 03 '11 at 13:34

spender

117,338
33
229
351

score 0 · Answer 5 · answered Mar 03 '11 at 13:36

0

Not sure if this is what you are looking for, but if you give the element a style, say "hasjs"

.hasjs{
    display: none;
}

Then remove this with some jQuery.

$('.hasjs').removeClass('hasjs');

answered Mar 03 '11 at 13:36

Tim B James

20,084
4
73
103

How can I write HTML code only if JS is enabled?

5 Answers5

Linked

Related