Como mudar o href de uma tag a com JavaScript

Neste artigo você vai aprender a como mudar o href de uma tag a com JavaScript, de uma maneira super simples e eficaz!

Fala programador(a), beleza? Bora aprender mais sobre links, href e também sobre a linguagem JavaScript

Primeiramente precisamos ter um elemento de link, uma tag âncora para podermos trabalhar nela

Vamos então criar o nosso HTML de exemplo:

<a href="" id="meu-link">Testando alteração</a>

Veja que o link está em branco, o atributo href, porém o seu pode estar preenchido, da mesma maneira será alterado

Depois de ter o elemento, basta selecioná-lo com algum método de seleção, como o querySelector

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

E acessar e atribuir um outro valor a propriedade href, isso fará com que o link seja atualizado

Veja um exemplo do que foi explicado acima:

const a = document.querySelector("#meu-link");

a.href = "https://www.google.com.br";

console.log(a);

Veja que alteramos a propriedade href para o link do Google

Isso fará com que ao clicar neste link, o usuário seja redirecionado para lá

Ou seja, mudamos com sucesso a propriedade href com JavaScript!

Conclusão

Neste artigo você aprendeu a como mudar o href de uma tag a, utilizando JavaScript

Utilizamos a seleção do elemento com o querySelector, isso nos dá a possibilidade de acessar todas as suas propriedades

Uma delas é a href, que podemos alterar atribuindo um novo valor a ela, como se fosse uma variável

Desta maneira é possível alterar o link da tag a com JS!

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

O que é o atributo href da tag a?

Antes de sair mudando, bora entender o que a gente tá mexendo

A tag a é a âncora, o elemento de link do HTML

E o href é o atributo dela que guarda o endereço de destino, ou seja, pra onde o usuário vai quando clicar

Se liga na estrutura básica:

<a href="https://horadecodar.com.br">Meu link</a>

O texto entre as tags é o que aparece na tela

Já o valor dentro do href é o caminho, e é justamente ele que vamos trocar com JavaScript

Entendendo isso, o resto fica bem mais tranquilo =)

Mudando o href com setAttribute:

Tem mais de um jeito de fazer a mesma coisa, e esse aqui é bom de conhecer

Além de atribuir direto na propriedade, dá pra usar o método setAttribute

Olha só:

const a = document.querySelector("#meu-link");

a.setAttribute("href", "https://www.google.com.br");

O resultado é o mesmo, o link passa a apontar pro novo endereço

A diferença é que o setAttribute mexe direto no atributo do HTML, do jeitinho que você escreveu

Quer ler o valor atual antes de trocar? Também rola:

const valorAtual = a.getAttribute("href");

Tome cuidado com uma pegadinha: se você ler usando a.href (a propriedade), o navegador te devolve a URL completa e absoluta

Já o a.getAttribute("href") te devolve exatamente o texto que tá no HTML

Bom saber pra não se ferrar depois haha

Perguntas frequentes:

Como pegar o href atual de um link com JavaScript?

Basta selecionar o elemento e ler a propriedade, tipo const link = document.querySelector("#meu-link").href

Se quiser o valor cru, do jeito que tá no HTML, usa getAttribute("href")

Dá pra mudar o href de vários links de uma vez?

Dá sim, é só selecionar todos com querySelectorAll e percorrer com um forEach, mudando o href de cada um dentro do laço

O href mudou mas o link não redireciona, e agora?

Confere se você selecionou o elemento certo e se o id bate com o do HTML

Se o querySelector não achar nada, ele devolve null e o seu código quebra na hora de acessar o href