Jak mogę dynamicznie dodać atrybut „href” do linku za pomocą JavaScript?

95

Jak mogę hrefdynamicznie dodać atrybut do łącza za pomocą JavaScript?

Zasadniczo chcę dodać hrefatrybut do <a></a>dynamicznie (tj. Gdy użytkownik kliknie określony obraz w witrynie).

Więc od:

<a>Link</a>

Muszę iść do:

<a href="somelink url">Link</a>
javascript html Pavel
źródło

Odpowiedzi:

165 
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
stecb
źródło
Ciekawy. Nie wiedziałem, że możesz bezpośrednio uzyskać dostęp do atrybutów jako pól (porównaj z moim rozwiązaniem poniżej, używając setAttribute). Czy ktoś wie, czy to podejście jest standardowe?
mgiuca,
Myślę, że element href elementu DOM jest atrybutem, który można ustawić bezpośrednio przez el.href. Zamiast tego setAttribute (el, attr) służy do dodawania niestandardowych atrybutów do określonego elementu DOM, więc w tym przypadku nie ma potrzeby używania go do ustawiania standardu. attr
stecb
Ale czy obie drogi są prawidłowe ? Nie próbując krytykować odpowiedzi - może być poprawna. Jednak w Internecie nie wystarczy znaleźć coś, co działa dla Ciebie. Musi działać we wszystkich przeglądarkach, a to oznacza, że ​​musisz przestrzegać standardów. FWIW, to też działa dla mnie (w Firefoksie), ale interesuje mnie, czy jest to rzeczywiście standardowy sposób. Specyfikacja W3C DOM ( w3.org/TR/DOM-Level-2-Core/core.html ) nie wydaje się o tym wspominać.
mgiuca,
6
Są to interfejsy ułatwiające interakcję z elementami. Na przykład wszystkie linki mają zdefiniowane metody, HTMLLinkElementktóre obsługują ustawianie niektórych pól, takich jak href. Musisz spojrzeć na odniesienie, aby zobaczyć, którego możesz użyć bez konieczności setAttribute. Innym przykładem jest <table>element ( HTMLTableElement ), za pomocą którego można insertRow()wstawiać nowe wiersze bez konieczności tworzenia <tr>i dołączania go do tabeli.
tajski,
3
@mgiuca: Ogólnie w przypadku HTML DOM, powinieneś raczej używać właściwości niż setAttribute()i getAttribute(), które są zepsute w IE i nie zawsze robią to, czego możesz się spodziewać. Zobacz stackoverflow.com/questions/4456231/…
Tim Down
25

Zakładam, że wiesz, jak uzyskać obiekt DOM dla <a>elementu (użyj document.getElementByIdlub innej metody).

Aby dodać dowolny atrybut, po prostu użyj metody setAttribute na obiekcie DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");
mgiuca
źródło
pal, setattribute jest dość niestandardowym sposobem modyfikowania atrybutów. Aby uzyskać dostęp do bieżących wartości lub je zmodyfikować, należy użyć właściwości. Na przykład użyj elt.value zamiast elt.setAttribute ('value', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes
naveen
@naveen Mówi się „przede wszystkim w XUL”, co prawdopodobnie nie jest tym, czym to jest. Nie jestem pewien, do jakich innych wartości się odnosi („pewne atrybuty” są bardzo niejasne), ale setAttributejest to oczywiście standard ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ) a W3C nie definiuje żadnych atrybutów, dla których nie działa. I odwrotnie, mogę zagwarantować, że użycie właściwości zakończy się niepowodzeniem dla niektórych nazw atrybutów. Takich jak tagName, i setAttribute- to już są pola / metody interfejsu Element. Nie widzę nigdzie w dokumencie W3C, który wspomina o właściwościach atrybutów.
mgiuca,
@mgiuca: Wygląda na to, że znalazłeś odpowiednią specyfikację po opublikowaniu ostatniego komentarza. Nie rozumiem twojego zdania na temat awarii właściwości, a potem o tym wspominam tagName. Czy mówisz o atrybutach niestandardowych?
Tim Down
Mam na myśli, że DOM (nawet zaimplementowany w przeglądarce) jest ogólną specyfikacją do pracy z drzewami XML w ogóle, a nie tylko z HTML. Podczas pracy z dowolnymi elementami XML jedynym sposobem niezawodnego pobierania i ustawiania atrybutów jest getAttributei setAttribute; "tagName"jest przykładem atrybutu, który nie może działać jako właściwość. Tylko podczas pracy z HTML i dla niektórych atrybutów zdefiniowanych w specyfikacji DOM HTML możesz używać właściwości do odczytywania i przypisywania atrybutów.
mgiuca
Prawdopodobnie nie rozumiem, ale to nadal jest mylące. tagName jest właściwością Elementobiektów w JavaScript w HTML i XML DOMS, i nie można dostać nazwę znacznika danego elementu poprzez getAttribute("tagName")(z wyjątkiem IE, którego wdrożenie getAttribute()i setAttribute()jest uszkodzona), co wydaje się dokładnie przeciwieństwo tego, co mówisz.
Tim Down
3

Najpierw spróbuj zmienić <a>Link</a>na <span id=test><a>Link</a></span>.

Następnie dodaj coś takiego do wywoływanej funkcji javascript:

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

W ten sposób link będzie wyglądał następująco:

<a href="somelink">Link</a>
Rahul Sudha
źródło
Cześć. Witamy w Stackoverflow. Wydaje się, że pytanie OP dotyczy tego, jak dodać hrefdo istniejącego a znacznika (w zasadzie chcę dynamicznie dodać atrybut href do <a> </a> ). Jednak ta odpowiedź wydaje się być wyjaśniając, jak tworzyć takie atag z href.
Moishe Lipsker
1 
document.getElementById('link-id').href = "new-href";

Wiem, że to stary post, ale tutaj jest jeden wiersz, który może być bardziej odpowiedni dla niektórych osób.

noɥʇʎԀʎzɐɹƆ
źródło