How to change the href for a hyperlink using jQuery

Question

How can you change the href for a hyperlink using jQuery

User · Answer

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.

User · Answer

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

User · Answer

Use the attr method on your lookup  You can switch out any attribute with a new value      a mylink   attr  href    http   cupcream com

User · Answer

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    lt a href  http   www google com  gt      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    lt div class  content  gt       lt p gt    link to  lt a href  http   www google com   gt Google lt  a gt      in the content    lt  p gt   lt  div gt    lt div class  footer  gt      Links   lt a href  http   www google com   gt Google lt  a gt   lt  div gt       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    lt div class  content  gt       lt p gt    link to  lt a href  http   www google com   gt Google lt  a gt      in the content    lt  p gt       lt p gt    second link to  lt a href  http   www google com            id  changeme  gt Google lt  a gt      in the content    lt  p gt   lt  div gt    lt div class  footer  gt      Links   lt a href  http   www google com   gt Google lt  a gt   lt  div gt      a changeme   attr  href     http   maps google com

User · Answer

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    lt a name  MyLinks  gt  lt  a gt   lt a href  http   www codeproject com   gt The CodeProject lt  a gt       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  lt a gt  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

User · Answer

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    lt a id  ali  alt  Ali  href  http   dezfoolian com au  gt Alireza Dezfoolian lt  a gt    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

User · Answer

Try link href    https          x000D   x000D  link href    https   stackoverflow com  x000D   lt a id  link  href     gt Click me lt  a gt  x000D   x000D   x000D

User · Answer

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    lt a href  http   www google com  gt      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    lt div class  content  gt       lt p gt    link to  lt a href  http   www google com   gt Google lt  a gt      in the content    lt  p gt   lt  div gt    lt div class  footer  gt      Links   lt a href  http   www google com   gt Google lt  a gt   lt  div gt       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    lt div class  content  gt       lt p gt    link to  lt a href  http   www google com   gt Google lt  a gt      in the content    lt  p gt       lt p gt    second link to  lt a href  http   www google com            id  changeme  gt Google lt  a gt      in the content    lt  p gt   lt  div gt    lt div class  footer  gt      Links   lt a href  http   www google com   gt Google lt  a gt   lt  div gt      a changeme   attr  href     http   maps google com

User · Answer

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    lt a rel  1  class  menu link  href  option1 html  gt Option 1 lt  a gt   lt a rel  2  class  menu link  href  option2 html  gt Option 2 lt  a gt       menu link   live  click   function        var thelink     this      alert   thelink html         alert   thelink attr  href         alert   thelink attr  rel          return false

User · Answer

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

User · Answer

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

User · Answer

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    lt a name  MyLinks  gt  lt  a gt   lt a href  http   www codeproject com   gt The CodeProject lt  a gt       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  lt a gt  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

User · Answer

Use the attr method on your lookup  You can switch out any attribute with a new value      a mylink   attr  href    http   cupcream com

User · Answer

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

User · Answer

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    lt a href  http   www google com  gt      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    lt div class  content  gt       lt p gt    link to  lt a href  http   www google com   gt Google lt  a gt      in the content    lt  p gt   lt  div gt    lt div class  footer  gt      Links   lt a href  http   www google com   gt Google lt  a gt   lt  div gt       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    lt div class  content  gt       lt p gt    link to  lt a href  http   www google com   gt Google lt  a gt      in the content    lt  p gt       lt p gt    second link to  lt a href  http   www google com            id  changeme  gt Google lt  a gt      in the content    lt  p gt   lt  div gt    lt div class  footer  gt      Links   lt a href  http   www google com   gt Google lt  a gt   lt  div gt      a changeme   attr  href     http   maps google com

User · Answer

Try link href    https          x000D   x000D  link href    https   stackoverflow com  x000D   lt a id  link  href     gt Click me lt  a gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    lt a name  MyLinks  gt  lt  a gt   lt a href  http   www codeproject com   gt The CodeProject lt  a gt       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  lt a gt  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

User · Answer

Use the attr method on your lookup  You can switch out any attribute with a new value      a mylink   attr  href    http   cupcream com

User · Answer

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.

User · Answer

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  lt a gt  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  lt a gt  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  lt a gt  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  lt a gt  elements whose href value ends with  png  a href   https      could be used to select  lt a gt  elements with href values that are prefixed with https      If you want to change the href value of  lt a gt  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

User · Answer

Use the attr method on your lookup  You can switch out any attribute with a new value      a mylink   attr  href    http   cupcream com

User · Answer

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    lt a rel  1  class  menu link  href  option1 html  gt Option 1 lt  a gt   lt a rel  2  class  menu link  href  option2 html  gt Option 2 lt  a gt       menu link   live  click   function        var thelink     this      alert   thelink html         alert   thelink attr  href         alert   thelink attr  rel          return false

User · Answer

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    lt a href  http   www google com  gt      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    lt div class  content  gt       lt p gt    link to  lt a href  http   www google com   gt Google lt  a gt      in the content    lt  p gt   lt  div gt    lt div class  footer  gt      Links   lt a href  http   www google com   gt Google lt  a gt   lt  div gt       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    lt div class  content  gt       lt p gt    link to  lt a href  http   www google com   gt Google lt  a gt      in the content    lt  p gt       lt p gt    second link to  lt a href  http   www google com            id  changeme  gt Google lt  a gt      in the content    lt  p gt   lt  div gt    lt div class  footer  gt      Links   lt a href  http   www google com   gt Google lt  a gt   lt  div gt      a changeme   attr  href     http   maps google com

User · Answer

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    lt a id  ali  alt  Ali  href  http   dezfoolian com au  gt Alireza Dezfoolian lt  a gt    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

User · Answer

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    lt a name  MyLinks  gt  lt  a gt   lt a href  http   www codeproject com   gt The CodeProject lt  a gt       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  lt a gt  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

User · Answer

a href   http   stackoverflow com         each function               this href   this href replace   http     beta  stackoverflow  com              http   stackoverflow com

User · Answer

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

User · Answer

a href   http   stackoverflow com         each function               this href   this href replace   http     beta  stackoverflow  com              http   stackoverflow com

User · Answer

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  lt a gt  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  lt a gt  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  lt a gt  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  lt a gt  elements whose href value ends with  png  a href   https      could be used to select  lt a gt  elements with href values that are prefixed with https      If you want to change the href value of  lt a gt  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

[javascript] How to change the href for a hyperlink using jQuery

Change the HREF of the Wordpress Avada Theme Logo Image

Examples related to javascript

Examples related to html

Examples related to jquery

Examples related to hyperlink