How to Change HTML Attribute Values With JavaScript

Learn how to change an HTML element attribute value with JavaScript.

Let’s say you have an anchor element on a website, with a faulty URL link path in the href attribute value.

A commonplace to see that would be in your menu/navigation bar:

<nav>
    <ul>
        <li>
            <a href="/path-to-your-page" id="some-id">Link</a>
        </li>
    </ul>
</nav>

Another common place to have internal web page links is in your footer at the bottom of your website.

Let’s say someone made a mistake. Your href value is /contact-me but it’s supposed to be /contact-us, and for whatever reason, you can’t solve it directly in the HTML code (perhaps you don’t have write access on the backend).

You need to fix it asap so your visitors won’t see a blank page when they click on it.

If you have access to the frontend code, e.g. via a CMS (Content Management System) you can use JavaScript to override the existing href value on your anchor element, without touching the backend at all.

I’ll show you two different ways to do it.

Select element based on ID

Let’s say your HTML markup looks like this, with a unique ID on each nav link:

<nav>
	<ul>
		<li>
			<a href="/" id="home">Home</a>
		</li>
		<li>
			<a href="/services" id="services">Services</a>
		</li>
		<li>
			<a href="/contact-me" id="contact">Contact</a>
		</li>
	</ul>
</nav>

Now we want to change the href value on the Contact link.

First, select your anchor/link element based on it’s id:

const contactLink = document.querySelector('#contact')

Then use dot notation to select the href attribute of your anchor element and give it a new value of /contact-us:

contactLink.href === '/contact-us'

That’s it!

Now if you log it to your console, you’ll see that the previous faulty href attribute value has been replaced with the new correct URL path:

console.log(contactLink.href)
// output: "https://your-domain.com/contact-us"

All the JS code:

// Select anchor/link element based on its ID
const contactLink = document.querySelector('#contact')

// Change href value
contactLink.href === '/contact-us'

// Print result
console.log(contactLink.href)

Select element based on a specific string value

You might be in a situation where your HTML link element doesn’t have a unique id or class. Your HTML markup could look like this

<nav>
	<ul>
		<li>
		    <a href="/">Home</a>
		</li>
		<li>
		    <a href="/services">Services</a>
		</li>
		<li>
		    <a href="/contact-me">Contact</a>
		</li>
	</ul>
</nav>

No problem. You can use a CSS3 selector with querySelector() to specify that you want to select an exact string value, in this case /contact-me.

Here’s how to do it:

const contactLink = document.querySelector('a[href*="/contact-me"]')

Now print the href value from your variable to see if you indeed found the href value you were looking for:

console.log(contactLink.href)
// output: "https://your-domain.com/contact-me" 

It did!

Now you can change the href value to the correct URL path just like in the previous example:

contactLink.href === '/contact-us'

All the code:

// Select link with specific href string value
const contactLink = document.querySelector('a[href*="/contact-me"]')

// Change href string value
contactLink.href = '/contact-us'

// Print result
console.log(contactLink.href)