Comment puis-je ajouter un attribut «href» à un lien de manière dynamique à l'aide de JavaScript?

93

Comment puis-je ajouter l' hrefattribut à un lien de manière dynamique à l'aide de JavaScript?

Je veux essentiellement ajouter un hrefattribut à <a></a>dynamiquement (c'est-à-dire lorsque l'utilisateur clique sur une image spécifique dans le site Web).

Donc de:

<a>Link</a>

J'ai besoin d'aller à:

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

Réponses:

163 
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
stecb
la source
Intéressant. Je ne savais pas que vous pouviez accéder directement aux attributs sous forme de champs (comparez à ma solution ci-dessous, en utilisant setAttribute). Quelqu'un sait-il si cette approche est standard?
mgiuca
Je pense que sur l'élément a DOM href est un attribut que vous pouvez définir directement par el.href. Au lieu de cela, setAttribute (el, attr) est utilisé pour ajouter des attributs personnalisés à un élément DOM particulier, donc dans ce cas, il n'est pas nécessaire de l'utiliser pour définir un std. attr
stecb
Mais les deux manières sont-elles correctes ? Ne pas essayer de critiquer la réponse - elle peut bien être correcte. Mais sur le Web, il ne suffit pas d'obtenir quelque chose qui fonctionne pour vous. Il doit fonctionner dans tous les navigateurs, ce qui signifie que vous devez respecter les normes. FWIW, cela fonctionne pour moi aussi (dans Firefox), mais je suis intéressé de savoir si c'est réellement une manière standard de le faire. La spécification DOM du W3C ( w3.org/TR/DOM-Level-2-Core/core.html ) ne semble pas le mentionner.
mgiuca
6
Ce sont les interfaces pour interagir plus facilement avec les éléments. Par exemple, tous les liens ont les méthodes définies dans HTMLLinkElementlesquelles prend en charge la définition de certains champs tels que href. Vous devez regarder dans la référence pour voir laquelle vous pouvez utiliser sans avoir à le faire setAttribute. Un autre exemple est l' <table>élément ( HTMLTableElement ) où vous pouvez utiliserinsertRow() pour insérer de nouvelles lignes sans avoir à créer <tr>et à l'ajouter à la table.
le
3
@mgiuca: En général pour les DOM HTML, vous devriez préférer utiliser les propriétés plutôt que setAttribute()et getAttribute(), qui sont cassées dans IE et ne font pas toujours ce que vous pourriez attendre. Voir stackoverflow.com/questions/4456231/…
Tim Down le
25

Je suppose que vous savez comment obtenir l'objet DOM pour l' <a>élément (utilisez document.getElementByIdou une autre méthode).

Pour ajouter un attribut, utilisez simplement le méthode setAttribute sur l'objet DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");
mgiuca
la source
pal, setattribute est assez non standard pour modifier les attributs. Pour accéder ou modifier les valeurs actuelles, vous devez utiliser les propriétés. Par exemple, utilisez elt.value au lieu de elt.setAttribute ('value', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes
naveen
@naveen Il dit "notamment en XUL", ce qui n'est probablement pas ce que c'est. Je ne sais pas à quelles autres valeurs il se réfère ("certains attributs" est très vague), mais setAttributec'est clairement la norme ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ), et le W3C ne définit aucun attribut pour lequel il ne fonctionne pas. Inversement, je peux garantir que l'utilisation de la propriété échouera pour certains noms d'attributs. Tels que tagName, et setAttribute- ce sont déjà des champs / méthodes de l'interface Element. Je ne vois nulle part dans le document W3C qui mentionne les propriétés des attributs.
mgiuca
@mgiuca: Il semble que vous ayez trouvé les spécifications pertinentes après avoir posté ce dernier commentaire. Je ne comprends pas votre point sur l'échec des propriétés, puis sur le fait de mentionner tagName. Parlez-vous d'attributs personnalisés?
Tim Down le
Je veux dire que DOM (même implémenté dans le navigateur) est une spécification générique pour travailler avec des arbres XML en général, pas seulement HTML. Lorsque vous travaillez avec des éléments XML arbitraires, le seul moyen d'obtenir et de définir des attributs de manière fiable est getAttributeet setAttribute; "tagName"est un exemple d'attribut qui ne peut pas fonctionner en tant que propriété. Ce n'est que lorsque vous travaillez avec HTML et pour certains attributs définis dans la spécification HTML DOM que vous pouvez utiliser les propriétés pour lire et attribuer des attributs.
mgiuca
Je ne comprends probablement pas, mais c'est encore déroutant. tagName est une propriété d' Elementobjets en JavaScript, à la fois dans les DOM HTML et XML, et vous ne pouvez pas obtenir le nom de la balise d'un élément via getAttribute("tagName")(sauf dans IE, dont l'implémentation de getAttribute()et setAttribute()est cassée), ce qui semble exactement le contraire de ce que vous dites.
Tim Down
3

Tout d'abord, essayez de passer <a>Link</a>à <span id=test><a>Link</a></span>.

Ensuite, ajoutez quelque chose comme ça dans la fonction javascript que vous appelez:

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

De cette façon, le lien ressemblera à ceci:

<a href="somelink">Link</a>
Rahul Sudha
la source
Salut. Bienvenue dans Stackoverflow. La question du PO semble être de savoir comment ajouter un hrefà une balise existante a ( je veux essentiellement ajouter un attribut href à <a> </a> de manière dynamique ). Cependant, cette réponse semble expliquer comment créer une abalise avec un href.
Moishe Lipsker
1 
document.getElementById('link-id').href = "new-href";

Je sais que c'est un ancien article, mais voici un one-liner qui pourrait être plus approprié pour certaines personnes.

nonɥʇʎԀʎzɐɹƆ
la source