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:

  • To get the href – var link = document.getElementById("ID").href;
  • To set the href – document.getElementById("ID").href = "http://site.com";
  • Alternatively, to set the href to run a Javascript function – document.getElementById("ID").href = "javascript:FUNCTION()";
  • To remove the href – document.getElementById("ID").removeAttribute("href");

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

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Href Mechanics Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

WORKING WITH HREF

All right, let us just now get into the mechanics of href, and a few ways we can work with it in Javascript.

 

1) GET, CHANGE, REMOVE HREF

1A) GET HREF

1a-get-href.html
<!-- (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

1b-set-url.html
<!-- (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

1c-set-js.html
<!-- (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

1d-remove-href.html
<!-- (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

2-onclick-href.html
<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

3-onclick-link.html
<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.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

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

Get Set Remove HREF In Javascript (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.