Wie kann ich einem Link mithilfe von JavaScript dynamisch das Attribut "href" hinzufügen?

93

Wie kann ich das hrefAttribut mithilfe von JavaScript dynamisch zu einem Link hinzufügen ?

Grundsätzlich möchte ich ein hrefAttribut <a></a>dynamisch hinzufügen (dh wenn der Benutzer auf ein bestimmtes Bild auf der Website klickt).

Also von:

<a>Link</a>

Ich muss gehen zu:

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

Antworten:

159 
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
stecb
quelle
Interessant. Ich wusste nicht, dass Sie direkt auf die Attribute als Felder zugreifen können (vergleiche mit meiner folgenden Lösung mit setAttribute). Weiß jemand, ob dieser Ansatz Standard ist?
mgiuca
Ich denke, auf dem a DOM-Element ist href ein Attribut, das Sie direkt von el.href festlegen können. Stattdessen wird setAttribute (el, attr) verwendet, um einem bestimmten DOM-Element einige benutzerdefinierte Attribute hinzuzufügen. In diesem Fall muss es also nicht zum Festlegen eines Standards verwendet werden. attr
stecb
Aber sind beide Wege richtig ? Ich versuche nicht, die Antwort zu kritisieren - es kann durchaus richtig sein. Aber im Web reicht es nicht aus, etwas zu bekommen, das für Sie funktioniert. Es muss in allen Browsern funktionieren, und das bedeutet, dass Sie Standards befolgen müssen. FWIW, das funktioniert auch für mich (in Firefox), aber ich bin interessiert zu wissen, ob es tatsächlich eine Standardmethode ist. Die W3C-DOM-Spezifikation ( w3.org/TR/DOM-Level-2-Core/core.html ) scheint dies nicht zu erwähnen.
mgiuca
6
Dies sind die Schnittstellen, um einfacher mit Elementen zu interagieren. Für alle Links sind beispielsweise die Methoden definiert, mit HTMLLinkElementdenen das Festlegen bestimmter Felder unterstützt wird, z href. Sie müssen in der Referenz nachsehen, welche Sie verwenden können, ohne es zu müssen setAttribute. Ein weiteres Beispiel ist das <table>Element ( HTMLTableElement ), mit dem Sie insertRow()neue Zeilen einfügen können , ohne das erstellen <tr>und an die Tabelle anhängen zu müssen.
Thai
3
@mgiuca: Im Allgemeinen sollten Sie für HTML-DOMs lieber Eigenschaften als setAttribute()und verwenden getAttribute(), die im IE fehlerhaft sind und nicht immer das tun, was Sie vielleicht erwarten. Siehe stackoverflow.com/questions/4456231/…
Tim Down
25

Ich gehe davon aus, dass Sie wissen, wie Sie das DOM-Objekt für das <a>Element erhalten (use document.getElementByIdoder eine andere Methode).

Verwenden Sie zum Hinzufügen eines Attributs einfach die setAttribute- Methode für das DOM-Objekt:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");
mgiuca
quelle
pal, setattribute ist ziemlich unstandardisiert zum Ändern von Attributen. Um auf die aktuellen Werte zuzugreifen oder diese zu ändern, sollten Sie die Eigenschaften verwenden. Verwenden Sie beispielsweise elt.value anstelle von elt.setAttribute ('value', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes
naveen
@naveen Es heißt "vor allem in XUL", was vermutlich nicht das ist, was dies ist. Ich bin nicht sicher, auf welche anderen Werte es sich bezieht ("bestimmte Attribute" sind sehr vage), aber es setAttributeist eindeutig der Standard ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ). und W3C definiert keine Attribute, für die es nicht funktioniert. Umgekehrt kann ich garantieren, dass die Verwendung der Eigenschaft für bestimmte Attributnamen fehlschlägt. Wie tagName, und setAttribute- das sind bereits Felder / Methoden der Element-Schnittstelle. Ich sehe nirgendwo im W3C-Dokument, in dem Eigenschaften für Attribute erwähnt werden.
mgiuca
@mgiuca: Es scheint, dass Sie die relevante Spezifikation gefunden haben, nachdem Sie diesen letzten Kommentar gepostet haben. Ich verstehe Ihren Standpunkt nicht, dass Eigenschaften fehlschlagen und dann erwähnt werden tagName. Sprechen Sie über benutzerdefinierte Attribute?
Tim Down
Ich meine, dass DOM (auch wenn es im Browser implementiert ist) eine generische Spezifikation für die Arbeit mit XML-Bäumen im Allgemeinen ist, nicht nur HTML. Wenn Sie mit beliebigen XML-Elementen arbeiten, können Sie Attribute nur mit getAttributeund zuverlässig abrufen und festlegen setAttribute. "tagName"ist ein Beispiel für ein Attribut, das nicht als Eigenschaft funktionieren kann. Nur wenn Sie mit HTML arbeiten und für bestimmte Attribute, die in der DOM-HTML-Spezifikation definiert sind, können Sie die Eigenschaften zum Lesen und Zuweisen von Attributen verwenden.
mgiuca
Ich verstehe das wahrscheinlich falsch, aber das ist immer noch verwirrend. tagName ist eine Eigenschaft von ElementObjekten in JavaScript, sowohl in HTML- als auch in XML-DOMs, und Sie können den Tag-Namen eines Elements nicht über getAttribute("tagName")(außer im IE, dessen Implementierung von getAttribute()und fehlerhaft ist) abrufen setAttribute(), was genau das Gegenteil von dem zu sein scheint, was Sie sagen.
Tim Down
3

Zuerst versucht Wechsel <a>Link</a>zu <span id=test><a>Link</a></span>.

Fügen Sie dann der aufgerufenen Javascript-Funktion Folgendes hinzu:

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

Auf diese Weise sieht der Link folgendermaßen aus:

<a href="somelink">Link</a>
Rahul Sudha
quelle
Hallo. Willkommen bei Stackoverflow. Die Frage des OP scheint zu sein, wie hrefeinem vorhandenen a Tag ein hinzugefügt werden kann ( ich möchte <a> </a> dynamisch ein href-Attribut hinzufügen ). Allerdings scheint diese Antwort zu erklären , wie erstellen einen aTag mit ein href.
Moishe Lipsker
1 
document.getElementById('link-id').href = "new-href";

Ich weiß, dass dies ein alter Beitrag ist, aber hier ist ein Einzeiler, der für einige Leute besser geeignet sein könnte.

noɥʇʎԀʎzɐɹƆ
quelle