What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To change where an HTML link goes, edit the anchor’s href attribute. In JavaScript, set the anchor’s href property or call setAttribute(). Use getAttribute("href") when you need the exact text written in the markup; the href property gives you the browser-resolved URL.
Change a hyperlink in HTML markup
An <a> element creates a hyperlink, and its href attribute specifies the destination. The link text should make that destination clear to the person following it. See the MDN reference for the anchor element.
Replace the existing href value with the new destination:
<a href="/old-page">Read the guide</a><a href="/new-page">Read the guide</a>The visible text can remain the same if it still accurately describes where the link leads. An href can point to a web page, a file, an email address, a location on the current page, or another URL-addressed resource.
#1 Best Overall
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Change an existing link with JavaScript
Select the anchor element, then assign its new destination to the href property:
const link = document.querySelector("a");
link.href = "/new-page";Setting link.href updates the element’s href attribute. This is usually the clearest choice when you already have an anchor and want to change its URL. The MDN documentation for HTMLAnchorElement.href describes the property.
Rank #2
Use setAttribute() when working with attributes generically
You can also set the destination with the DOM method setAttribute():
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstalllink.setAttribute("href", "/new-page");If the attribute is absent, setAttribute() adds it; if it is present, the method updates its value. Choose between the two approaches based on how your code is organized:
Rank #3
| Approach | Use it when |
|---|---|
link.href = value |
You are working with an anchor and want to set or read its URL. |
link.setAttribute("href", value) |
You are handling an element’s attributes by name. |
Both approaches update the anchor’s destination. See MDN’s setAttribute() reference for method behavior and security considerations.
Why anchor.href may return a full URL
The href property reports the URL resolved against the document’s base URL. If the HTML says href="../new-page", reading link.href can return an absolute URL, while link.getAttribute("href") returns the literal string ../new-page.
link.href; // Resolved URL
link.getAttribute("href"); // Attribute text, such as "../new-page"Use the property when your code needs the effective destination the browser resolves. Use getAttribute("href") when it needs the authored attribute string, including its relative form. Relative links depend on the document’s base URL; the WHATWG HTML Standard’s links section describes how links are interpreted.
Validate destinations and make link behavior clear
Do not put arbitrary, untrusted strings into a link destination without checking them. Restrict or validate user-provided URLs for the kinds of destinations your application intends to allow. MDN also warns that setAttribute() can be an injection sink for certain attributes, including in script-URL contexts; apply relevant Trusted Types protections where supported.
Best Value
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
If a link opens a new tab or window, or triggers a download, make that behavior clear to users. For target="_blank", modern browsers implicitly provide noopener behavior, as noted in MDN’s anchor element documentation.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
