Get Set Remove HREF In Javascript (Simple Examples)

Welcome to a quick tutorial on how to get, set, and remove the href property in Javascript. By now, you should know href very well. That “thing” we use to specify which webpage to link to. But how can we dynamically change or remove it using Javascript? For a quick answer:

That covers the quick basics, but read on for more examples!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/get-set-remove-href-in-javascript/” title=”Get Set Remove HREF In Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

1) GET, CHANGE, REMOVE HREF

1A) GET HREF

<!-- (A) DEMO LINK -->
<a href="https://code-boxx.com" id="demo">Demo</a>
 
<!-- (B) GET HREF -->
<script>
function hrefget () {
  alert(document.getElementById("demo").href);
}
</script>
<input type="button" value="Get href" onclick="hrefget()">

Yes, it’s as simple as that. We can get the current href with ELEMENT.href.

1B) SET HREF TO URL

<!-- (A) DEMO LINK -->
<a href="#" id="demo">Demo</a>

<!-- (B) SET URL HREF -->
<script>
function hrefseturl () {
  document.getElementById("demo").href = "https://code-boxx.com";
  alert("Set to URL");
}
</script>
<input type="button" value="Set URL href" onclick="hrefseturl()">

To set or change the href of a link, simply assign a new one – ELEMENT.href = "http://site.com".

 

 

1C) SET HREF TO JAVASCRIPT FUNCTION

<!-- (A) DEMO LINK -->
<a href="#" id="demo">Demo</a>
 
<!-- (B) SET JS HREF -->
<script>
function foo () { alert("Foo!"); }
function hrefsetjs () {
  document.getElementById("demo").href = "javascript:foo()";
  alert("Set to JS Function");
}
</script>
<input type="button" value="Set JS href" onclick="hrefsetjs()">

We can also set the href to run a Javascript function. But I am personally not a fan of this… Will explain more below.

 

1D) REMOVE HREF

<!-- (A) DEMO LINK -->
<a href="https://code-boxx.com" id="demo">Demo Link</a>
 
<!-- (B) REMOVE HREF -->
<script>
function hrefdel () {
  document.getElementById("demo").href = "";
  // document.getElementById("demo").removeAttribute("href");
  alert("Link removed");
}
</script>
<input type="button" value="Remove href" onclick="hrefdel()">

We can remove the href by:

• Setting an empty href – ELEMENT.href = ""
• Or removing it entirely – ELEMENT.removeAttribute("href")

Take note of the difference here though.

• An empty href is equivalent to pointing to the current page itself href="#" .
• But entirely removing the href will result in a “do nothing when clicked” link.

 

 

2) ONCLICK & JAVASCRIPT HREF

<script>
function dummyA () { alert("A"); }
function dummyB () { alert("B"); }
</script>
 
<a href="javascript:dummyA()" onclick="dummyB()">
  This is a demo link.
</a>

As you already know, we can use href="javascript:FUNCTION()" to run a Javascript function. But take note that we can also attach onclick="FUNCTION()" to do the same. What happens if we do both onclick and href="javascript:" together? As the above example turns out, dummyB() will run first, followed by dummyA().

But personally, I am not a fan of using href="javascript:". It is actually a mechanism from the past, and it is plain confusing. Just stick with onclick. If you need to run multiple functions on click, then just do onclick="FUNCTION(); FUNCTION();". There’s really no need to do any of the funky javascript:FUNCTION() stuff.

 

3) ONCLICK & URL LINK TOGETHER

<script>
function dummy () { alert("FOO!"); }
</script>

<a href="https://code-boxx.com" target="_blank" onclick="dummy()">
  This is a demo link.
</a>

Lastly, let us try out another “funky combination” – We have a href="URL" link and an onclick attached. So what happens here is, the onclick will run first before opening the URL link. At least on Google Chrome.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

EXTRA) JAVASCRIPT VOID!?

In some tutorials, you may spot something like this:

<a href="javascript:void(0)">FOO!</a>

Basically, this means “do nothing on click”. But be warned – This is a blast from the past, and don’t do this anymore. In modern-day HTML and Javascript, we simply remove the href attribute.

 

INFOGRAPHIC CHEAT SHEET

 

LINKS & REFERENCES

• Location: href – MDN
• JavaScript function in href vs. onClick – Tutorials Point