¿Cómo puedo agregar el atributo "href" a un enlace dinámicamente usando JavaScript?

95

¿Cómo puedo agregar el hrefatributo a un enlace dinámicamente usando JavaScript?

Básicamente, quiero agregar un hrefatributo de <a></a>forma dinámica (es decir, cuando el usuario hace clic en una imagen específica en el sitio web).

Entonces de:

<a>Link</a>

Necesito irme:

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

Respuestas:

165 
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
stecb
fuente
Interesante. No sabía que podía acceder directamente a los atributos como campos (compare con mi solución a continuación, usando setAttribute). ¿Alguien sabe si este enfoque es estándar?
mgiuca
Creo que en el elemento DOM, href es un atributo que puede establecer directamente mediante el.href. En su lugar, setAttribute (el, attr) se usa para agregar algunos atributos personalizados a un elemento DOM en particular, por lo que en este caso no es necesario usarlo para establecer un std. attr
stecb
Pero, ¿son ambos correctos ? Sin intentar criticar la respuesta, puede que sea correcta. Pero en la web, no es suficiente obtener algo que funcione para usted. Debe funcionar en todos los navegadores, y eso significa que debe seguir los estándares. FWIW, esto también funciona para mí (en Firefox), pero estoy interesado en saber si en realidad es una forma estándar de hacerlo. La especificación DOM de W3C ( w3.org/TR/DOM-Level-2-Core/core.html ) no parece mencionarlo.
mgiuca
6
Estas son las interfaces para interactuar con los elementos más fácilmente. Por ejemplo, todos los enlaces tienen los métodos definidos en los HTMLLinkElementque se admite la configuración de ciertos campos como href. Tienes que mirar en la referencia para ver cuál puedes usar sin tener que hacerlo setAttribute. Otro ejemplo es el <table>elemento ( HTMLTableElement ) donde puede usar insertRow()para insertar nuevas filas sin tener que crear el <tr>y agregarlo a la tabla.
tailandés
3
@mgiuca: en general, para los DOM HTML, debería preferir usar propiedades en lugar de setAttribute()y getAttribute(), que están rotas en IE y no siempre hacen lo que podría esperar. Ver stackoverflow.com/questions/4456231/…
Tim Down
25

Supongo que sabe cómo obtener el objeto DOM para el <a>elemento (use document.getElementByIdo algún otro método).

Para agregar cualquier atributo, simplemente use el método setAttribute en el objeto DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");
mgiuca
fuente
pal, setattribute es bastante no estándar para modificar atributos. Para acceder o modificar los valores actuales, debe utilizar las propiedades. Por ejemplo, use elt.value en lugar de elt.setAttribute ('value', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes
naveen
@naveen Dice "sobre todo en XUL", que presumiblemente no es lo que es. No estoy seguro de a qué otros valores se refiere ("ciertos atributos" es muy vago), pero setAttributees claramente el estándar ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ), y el W3C no define ningún atributo para el que no funcione. Por el contrario, puedo garantizar que el uso de la propiedad fallará para ciertos nombres de atributos. Tales como tagName, y setAttribute- esos ya son campos / métodos de la interfaz Element. No veo en ningún lugar del documento W3C que mencione propiedades para atributos.
mgiuca
@mgiuca: Parece que encontraste la especificación relevante después de publicar ese último comentario. No entiendo su punto sobre las propiedades que fallan y luego lo mencionan tagName. ¿Estás hablando de atributos personalizados?
Tim Down
Quiero decir que DOM (incluso tal como se implementó en el navegador) es una especificación genérica para trabajar con árboles XML en general, no solo HTML. Cuando se trabaja con elementos XML arbitrarios, la única forma de obtener y establecer atributos de manera confiable es getAttributey setAttribute; "tagName"es un ejemplo de un atributo que no puede funcionar como propiedad. Solo cuando se trabaja con HTML, y para ciertos atributos definidos en la especificación DOM HTML, puede usar las propiedades para leer y asignar atributos.
mgiuca
Probablemente estoy entendiendo mal, pero eso sigue siendo confuso. tagName es una propiedad de los Elementobjetos en JavaScript, tanto en HTML como XML DOM, y no puede obtener el nombre de la etiqueta de un elemento a través de getAttribute("tagName")(excepto en IE, cuya implementación de getAttribute()y setAttribute()está rota), que parece precisamente lo contrario de lo que está diciendo.
Tim Down
3

Primero, intente cambiar <a>Link</a>a <span id=test><a>Link</a></span>.

Luego, agregue algo como esto en la función javascript que está llamando:

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

De esta forma, el enlace se verá así:

<a href="somelink">Link</a>
Rahul Sudha
fuente
Hola. Bienvenido a Stackoverflow. La pregunta del OP parece ser sobre cómo agregar un hrefa una etiqueta existente a ( básicamente quiero agregar un atributo href a <a> </a> dinámicamente ). Sin embargo, esta respuesta parece explicar cómo crear una aetiqueta con una extensión href.
Moishe Lipsker
1 
document.getElementById('link-id').href = "new-href";

Sé que esta es una publicación antigua, pero aquí hay una frase que podría ser más adecuada para algunas personas.

noɥʇʎԀʎzɐɹƆ
fuente