Best way to hide a button on an HTML page with Javascript

Question

A simple page, with the button:

<button id="MyButton">Hello</button>

The problem is:

• I need the button to show if Javascript is disabled
• I need the button to be hidden if Javascript is enabled

A simple Jquery:

$('#MyButton').hide();

Isn't sufficient as the button 'flickers', it loads and then hides itself and it's very noticeable.

The one way I've found to make this work is by using JS to hide it immediately after:

<button id="MyButton">Hello</button>
<script>
    document.getElementById('MyButton').style.visibility = 'hidden';
</script>

This seems a bit ugly and breaking a couple of good standards rules, is this the only way to hide the button without a flickering effect?

Answer 1

Sounds like a job for the noscript tag!

<noscript>
    <button id="MyButton">Hello</button>
</noscript>