How to change the href attribute for a hyperlink using jQuery

Using

$("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.

---

With jQuery 1.6 and above you should use:

$("a").prop("href", "http://www.jakcms.com")

The difference between prop and attr is that attr grabs the HTML attribute whereas prop grabs the DOM property.

You can find more details in this post: .prop() vs .attr()

---

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

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

---

Even though the OP explicitly asked for a jQuery answer, you don't need to use jQuery for everything these days.

A few methods without jQuery:

If you want to change the href value of all elements, select them all and then iterate through the nodelist: (example) var anchors = document.querySelectorAll('a'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "http://stackoverflow.com"; });

If you want to change the href value of all elements that actually have an href attribute, select them by adding the [href] attribute selector (a[href]): (example) var anchors = document.querySelectorAll('a[href]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "http://stackoverflow.com"; });

If you want to change the href value of elements that contain a specific value, for instance google.com, use the attribute selector a[href*="google.com"]: (example) var anchors = document.querySelectorAll('a[href*="google.com"]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "http://stackoverflow.com"; }); Likewise, you can also use the other attribute selectors. For instance: a[href$=".png"] could be used to select elements whose href value ends with .png. a[href^="https://"] could be used to select elements with href values that are prefixed with https://.

a[href$=".png"] could be used to select elements whose href value ends with .png.

a[href^="https://"] could be used to select elements with href values that are prefixed with https://.

If you want to change the href value of elements that satisfy multiple conditions: (example) var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "http://stackoverflow.com"; });

..no need for regex, in most cases.

---

The simple way to do so is :

Attr function (since jQuery version 1.0)

$("a").attr("href", "https://stackoverflow.com/") 

or

Prop function (since jQuery version 1.6)

$("a").prop("href", "https://stackoverflow.com/")

Also, the advantage of above way is that if selector selects a single anchor, it will update that anchor only and if selector returns a group of anchor, it will update the specific group through one statement only.

Now, there are lot of ways to identify exact anchor or group of anchors:

Quite Simple Ones:

Select anchor through tag name : $("a") Select anchor through index: $("a:eq(0)") Select anchor for specific classes (as in this class only anchors with class active) : $("a.active") Selecting anchors with specific ID (here in example profileLink ID) : $("a#proileLink") Selecting first anchor href: $("a:first")

More useful ones:

Selecting all elements with href attribute : $("[href]") Selecting all anchors with specific href: $("a[href='www.stackoverflow.com']") Selecting all anchors not having specific href: $("a[href!='www.stackoverflow.com']") Selecting all anchors with href containing specific URL: $("a[href*='www.stackoverflow.com']") Selecting all anchors with href starting with specific URL: $("a[href^='www.stackoverflow.com']") Selecting all anchors with href ending with specific URL: $("a[href$='www.stackoverflow.com']")

Now, if you want to amend specific URLs, you can do that as:

For instance if you want to add proxy website for all the URLs going to google.com, you can implement it as follows:

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });

---

This snippet invokes when a link of class 'menu_link' is clicked, and shows the text and url of the link. The return false prevents the link from being followed.

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});

---

Stop using jQuery just for the sake of it! This is so simple with JavaScript only.

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

---

Try this;

$("#link").attr("href", "https://coenvink.com/")

A breakdown of what the code does:

$("#link")

This part of the code gets the element with id "Link". After this you set the attribute 'href' (witch is basically the link-to-url) to your new url, witch, in this case, is my own website:

.attr("href", "https://coenvink.com/")

I hope it is clear now!

---

href in an attribute, so you can change it using pure JavaScript, but if you already have jQuery injected in your page, don't worry, I will show it both ways:

Imagine you have this href below:

<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

And you like to change it the link...

Using pure JavaScript without any library you can do:

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

But also in jQuery you can do:

$("#ali").attr("href", "https://stackoverflow.com");

or

$("#ali").prop("href", "https://stackoverflow.com");

In this case, if you already have jQuery injected, probably jQuery one look shorter and more cross-browser...but other than that I go with the JS one...

---

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

---

Change the HREF of the Wordpress Avada Theme Logo Image

If you install the ShortCode Exec PHP plugin the you can create this Shortcode which I called myjavascript

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

You can now go to Appearance/Widgets and pick one of the footer widget areas and use a text widget to add the following shortcode

[myjavascript]

The selector may change depending upon what image your using and if it's retina ready but you can always figure it out by using developers tools.

---

Try

link.href = 'https://...'

link.href = 'https://stackoverflow.com' Click me

---