How To change the HREF for a Hyperlink using jQuery

How can you change the href for a hyperlink using jQuery?

From stackoverflow Brian Boatright

• $("a").attr("href", "http://www.google.com/")
  

  ...Will modify the href of all hyperlinks to point to Google. You probably want a somewhat more refined selector though. For instance, if you have a mix of link source (hyperlink) and link target (a.k.a. "anchor") anchor tags:

  <a name="MyLinks"></a>
  <a href="http://www.codeproject.com/>The CodeProject</a>
  

  ...Then you probably don't want to accidentally add href attributes to them. For safety then, we can specify that our selector will only match <a> tags with an existing href attribute:

  $("a[href]") //...
  

  Of course, you'll probably have something more interesting in mind. If you want to match an anchor with a specific existing href, you might use something like this:

  $("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
  

  This will find links where the href exactly matches the string http://www.google.com/. A more involved task might be matching, then updating only part of the href:

  $("a[href^='http://stackoverflow.com']")
     .each(function()
     { 
        this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
           "http://stackoverflow.com");
     });
  

  The first part selects only links where the href starts with http://stackoverflow.com. Then, a function is defined that uses a simple regular expression to replace this part of the URL with a new one. Note the flexibility this gives you - any sort of modification to the link could be done here.

  Ryan Doherty : That should be a lowercase 'a'. Uppercase isn't used anymore and is possible wrong for a strict doctype?

  Shog9 : Good point. Updated.

  eyelidlessness : "in HTML, element names are case-insensitive, but in XML they are case-sensitive." - http://www.w3.org/TR/CSS21/selector.html

  Brian Boatright : the 1st example I get completely. i'm not familiar at all with the second. do you have a link that explains it more completely? Thanks for both!

  Shog9 : @brian: I've added a better explanation for it.

  Brian Boatright : thanks! excellent answer btw.

  Jens Roland : Nice! +1 for sheer excellence. I especially liked the matches example. Just what a grown boy needs :)

  David Hedlund : For completeness, since this is still being linked to occasionally, I'll add that since jQuery 1.4, the last example doesn't require using `each` - the following would now be possible: `$(selector).attr('href', function() { return this.replace(/.../, '...'); });`
  From Shog9

• Use the attr method on your lookup. You can switch out any attribute with a new value.

  $("a.mylink").attr("href", "http://cupcream.com");
  

  From Peter Shinners

• Depending on whether you want to change all the identical links to something else or you want control over just the ones in a given section of the page or each one individually, you could do one of these.

  Change all links to Google so they point to Google Maps:

  <a href="http://www.google.com">
  
  $("a[href='http://www.google.com/']").attr('href', 
  'http://maps.google.com/');
  

  To change links in a given section, add the container div's class to the selector. This example will change the Google link in the content, but not in the footer:

  <div class="content">
      <p>...link to <a href="http://www.google.com/">Google</a>
      in the content...</p>
  </div>
  
  <div class="footer">
      Links: <a href="http://www.google.com/">Google</a>
  </div>
  
  $(".content a[href='http://www.google.com/']").attr('href', 
  'http://maps.google.com/');
  

  To change individual links regardless of where they fall in the document, add an id to the link and then add that id to the selector. This example will change the second Google link in the content, but not the first one or the one in the footer:

  <div class="content">
      <p>...link to <a href="http://www.google.com/">Google</a>
      in the content...</p>
      <p>...second link to <a href="http://www.google.com/" 
          id="changeme">Google</a>
      in the content...</p>
  </div>
  
  <div class="footer">
      Links: <a href="http://www.google.com/">Google</a>
  </div>
  
  $("a#changeme").attr('href', 
  'http://maps.google.com/');
  

  From flamingLogos