Is there a HTML opposite to <noscript>?

I don't really agree with all the answers here about embedding the HTML beforehand and hiding it with CSS until it is again shown with JS. Even w/o JavaScript enabled, that node still exists in the DOM. True, most browsers (even accessibility browsers) will ignore it, but it still exists and there may be odd times when that comes back to bite you.

My preferred method would be to use jQuery to generate the content. If it will be a lot of content, then you can save it as an HTML fragment (just the HTML you will want to show and none of the html, body, head, etc. tags) then use jQuery's ajax functions to load it into the full page.

test.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_test.html

<p>This is from an HTML fragment document</p>

result

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>

Easiest way I can think of:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

No document.write, no scripts, pure CSS.


First of all, always separate content, markup and behaviour!

Now, if you're using the jQuery library (you really should, it makes JavaScript a lot easier), the following code should do:

$(document).ready(function() {
    $("body").addClass("js");
});

This will give you an additional class on the body when JS is enabled. Now, in CSS, you can hide the area when the JS class is not available, and show the area when JS is available.

Alternatively, you can add no-js as the the default class to your body tag, and use this code:

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

Remember that it is still displayed if CSS is disabled.


You could have an invisible div that gets shown via JavaScript when the page loads.

Tags:

Javascript

Html

Noscript

Recent Posts