noscript to filter add hyperlinks - Clean JavaScript degrade

Question

My project relies on JavaScript to dynamically display content on a hyperlink click. In order to make it cleanly degrade without JavaScript enabled, I'm simply showing all page content and using hyperlinks and anchors to connect the pieces.

I'm relying on jQuery to identify the click of the hyperlink by ID, so without JavaScript I need to add in the anchor.

Is this a good use of noscript? Mainly, will this always add the hyperlink without JavaScript?

<div id="link1">
  <noscript><a href="#link1content"></noscript>
    1. Link Name Here
  <noscript></a></noscript>
</div>

Answer 1

Elements contain other elements, not just tags. The start tag and the end tag must be in the container. A validator would have picked this up.

You shouldn't be using noscript for this in the first place though. Something more along the lines of:

<a class="enhanced_in_some_way" href="#link1content">1. Link Name Here</a>

with

jQuery('a.enhanced_in_some_way').click(function (event) {
    var link = this;
    var name = /#([^#]+$)/.exec(link.href);
    do_something_with(name);
    event.preventDefault();

});

… is probably the way forward.

Answer 2

In many browsers, this will work, but I wouldn't recommend it. It completely breaks the structure of the HTML and is not guaranteed to work in all browsers or even future versions of browsers that it does work in now.

Answer 3

Actually, you don't need noscript here. Put the anchor destination into the hyperlinks by default, and in your jQuery or javascript click function, finish with a return false or event.preventDefault();. This will prevent the link from being followed if JavaScript is enabled, and results in a followed anchor if it is disabled. You're covered both ways with minimal overhead.