Como posso adicionar o atributo “href” a um link dinamicamente usando JavaScript?

93

Como posso adicionar o hrefatributo a um link dinamicamente usando JavaScript?

Basicamente, quero adicionar um hrefatributo para <a></a>dinamicamente (ou seja, quando o usuário clica em uma imagem específica no site).

Então, de:

<a>Link</a>

Preciso ir para:

<a href="somelink url">Link</a>
javascript html Pavel
fonte

Respostas:

163 
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
Stecb
fonte
Interessante. Não sabia que dava para acessar diretamente os atributos como campos (compare a minha solução abaixo, usando setAttribute). Alguém sabe se essa abordagem é padrão?
mgiuca
Acho que no elemento DOM href é um atributo que você pode definir diretamente por el.href. Em vez disso, setAttribute (el, attr) é usado para adicionar alguns atributos personalizados a um elemento DOM específico, portanto, neste caso, não há necessidade de usá-lo para definir um std. attr
stecb
Mas as duas formas estão corretas ? Não tentando criticar a resposta - pode muito bem estar correta. Mas na web, não é suficiente obter algo que funcione para você. Ele precisa funcionar em todos os navegadores e isso significa que você precisa seguir os padrões. FWIW, isso funciona para mim também (no Firefox), mas estou interessado em saber se é realmente uma maneira padrão de fazer isso. A especificação W3C DOM ( w3.org/TR/DOM-Level-2-Core/core.html ) não parece mencioná-lo.
mgiuca
6
Essas são as interfaces para interagir com os elementos mais facilmente. Por exemplo, todos os links têm os métodos definidos nos HTMLLinkElementquais suportam a configuração de certos campos, como href. Você tem que olhar a referência para ver qual você pode usar sem precisar setAttribute. Outro exemplo é o <table>elemento ( HTMLTableElement ) onde você pode usar insertRow()para inserir novas linhas sem ter que criar o <tr>e anexá-lo à tabela.
Tailandês de
3
@mgiuca: Em geral, para HTML DOMs, você deve preferir usar propriedades em vez de setAttribute()e getAttribute(), que são quebrados no IE e nem sempre fazem o que você espera. Consulte stackoverflow.com/questions/4456231/…
Tim Down
25

Presumo que você saiba como obter o objeto DOM para o <a>elemento (use document.getElementByIdou algum outro método).

Para adicionar qualquer atributo, basta usar o método setAttribute no objeto DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");
mgiuca
fonte
amigo, setattribute não é padrão para modificar atributos. Para acessar ou modificar os valores atuais, você deve usar as propriedades. Por exemplo, use elt.value em vez de elt.setAttribute ('valor', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes
naveen
@naveen Diz "mais notavelmente em XUL", que provavelmente não é o que é. Não tenho certeza de quais outros valores ele se refere ("certos atributos" é muito vago), mas setAttributeé claramente o padrão ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ), e o W3C não define nenhum atributo para o qual não funciona. Por outro lado, posso garantir que o uso da propriedade falhará para determinados nomes de atributos. Como tagName, e setAttribute- esses já são campos / métodos da interface do Elemento. Não vejo nenhum lugar no documento W3C que mencione propriedades para atributos.
mgiuca
@mgiuca: Parece que você encontrou a especificação relevante depois de postar o último comentário. Eu não entendo seu ponto sobre propriedades falhando, e depois mencionando tagName. Você está falando sobre atributos personalizados?
Tim Down de
Quero dizer que DOM (mesmo quando implementado no navegador) é uma especificação genérica para trabalhar com árvores XML em geral, não apenas HTML. Ao trabalhar com elementos XML arbitrários, a única maneira de obter e definir atributos de maneira confiável é getAttributee setAttribute; "tagName"é um exemplo de atributo que não pode funcionar como propriedade. Apenas ao trabalhar com HTML e para determinados atributos definidos na especificação HTML do DOM, você pode usar as propriedades para ler e atribuir atributos.
mgiuca
Provavelmente estou entendendo mal, mas isso ainda é confuso. tagName é uma propriedade de Elementobjetos em JavaScript, em HTML e XML DOMs, e você não pode obter o nome da tag de um elemento via getAttribute("tagName")(exceto no IE, cuja implementação de getAttribute()e setAttribute()está quebrada), o que parece exatamente o oposto do que você está dizendo.
Tim Down
3

Primeiro, tente mudar <a>Link</a>para <span id=test><a>Link</a></span>.

Em seguida, adicione algo assim na função javascript que você está chamando:

var abc = 'somelink';
document.getElementById('test').innerHTML = '<a href="' + abc + '">Link</a>';

Dessa forma, o link ficará assim:

<a href="somelink">Link</a>
Rahul Sudha
fonte
Oi. Bem-vindo ao Stackoverflow. A questão do OP parece ser sobre como adicionar um hrefa uma tag existente a ( basicamente, quero adicionar um atributo href a <a> </a> dinamicamente ). No entanto, essa resposta parece explicar como criar uma atag com um href.
Moishe Lipsker
1 
document.getElementById('link-id').href = "new-href";

Eu sei que esta é uma postagem antiga, mas aqui está uma linha que pode ser mais adequada para algumas pessoas.

noɥʇʎԀʎzɐɹƆ
fonte