Bagaimana cara menambahkan atribut "href" ke link secara dinamis menggunakan JavaScript?

95

Bagaimana cara menambahkan hrefatribut ke tautan secara dinamis menggunakan JavaScript?

Saya pada dasarnya ingin menambahkan hrefatribut ke <a></a>dinamis (yaitu ketika pengguna mengklik gambar tertentu di situs web).

Jadi dari:

<a>Link</a>

Saya harus pergi ke:

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

Jawaban:

166 
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
stecb
sumber
Menarik. Saya tidak tahu Anda dapat langsung mengakses atribut sebagai bidang (bandingkan dengan solusi saya di bawah, menggunakan setAttribute). Adakah yang tahu jika pendekatan ini standar?
mgiuca
Saya pikir pada a href elemen DOM adalah atribut yang dapat Anda atur langsung oleh el.href. Sebaliknya, setAttribute (el, attr) digunakan untuk menambahkan beberapa atribut khusus ke elemen DOM tertentu, jadi dalam hal ini tidak perlu menggunakannya untuk menyetel std. attr
stecb
Tapi apakah keduanya benar ? Tidak mencoba mengkritik jawabannya - itu mungkin benar. Namun di web, mendapatkan sesuatu yang sesuai untuk Anda saja tidak cukup. Ini perlu berfungsi di semua browser, dan itu berarti Anda harus mengikuti standar. FWIW, ini juga berfungsi untuk saya (di Firefox), tetapi saya tertarik untuk mengetahui apakah ini sebenarnya cara standar untuk melakukannya. Spesifikasi DOM W3C ( w3.org/TR/DOM-Level-2-Core/core.html ) sepertinya tidak menyebutkannya.
mgiuca
6
Ini adalah antarmuka untuk berinteraksi dengan elemen dengan lebih mudah. Misalnya, semua tautan memiliki metode yang ditentukan HTMLLinkElementyang mendukung pengaturan bidang tertentu seperti href. Anda harus melihat referensi untuk melihat mana yang dapat Anda gunakan tanpa harus setAttribute. Contoh lainnya adalah <table>elemen ( HTMLTableElement ) di mana Anda dapat menggunakan insertRow()untuk menyisipkan baris baru tanpa harus membuat <tr>dan menambahkannya ke tabel.
Thai
3
@mgiuca: Secara umum untuk DOM HTML, Anda sebaiknya memilih menggunakan properti daripada setAttribute()dan getAttribute(), yang rusak di IE dan tidak selalu melakukan apa yang Anda harapkan. Lihat stackoverflow.com/questions/4456231/…
Penurunan Waktu
25

Saya berasumsi Anda tahu cara mendapatkan objek DOM untuk <a>elemen (gunakan document.getElementByIdatau metode lain).

Untuk menambahkan atribut apa pun, cukup gunakan metode setAttribute pada objek DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");
mgiuca
sumber
sobat, setattribute cukup non-standar untuk memodifikasi atribut. Untuk mengakses atau mengubah nilai saat ini, Anda harus menggunakan properti. Misalnya, gunakan elt.value bukan elt.setAttribute ('value', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes
naveen
@naveen Dikatakan "terutama di XUL", yang mungkin bukan ini. Saya tidak yakin nilai lain yang dirujuknya ("atribut tertentu" sangat kabur), tetapi setAttributejelas merupakan standarnya ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ), dan W3C tidak menentukan atribut apa pun yang tidak berfungsi untuknya. Sebaliknya, saya dapat menjamin bahwa penggunaan properti akan gagal untuk nama atribut tertentu. Seperti tagName, dan setAttribute- itu sudah merupakan bidang / metode dari antarmuka Elemen. Saya tidak melihat di mana pun di dokumen W3C yang menyebutkan properti untuk atribut.
mgiuca
@mgiuca: Sepertinya Anda menemukan spesifikasi yang relevan setelah memposting komentar terakhir itu. Saya tidak mengerti maksud Anda tentang properti yang gagal, dan kemudian menyebutkan tagName. Apakah Anda berbicara tentang atribut khusus?
Tim Down
Maksud saya bahwa DOM (bahkan seperti yang diterapkan di browser) adalah spesifikasi umum untuk bekerja dengan pohon XML secara umum, bukan hanya HTML. Saat bekerja dengan elemen XML yang berubah-ubah, satu-satunya cara untuk mendapatkan dan menyetel atribut secara andal adalah getAttributedan setAttribute; "tagName"adalah contoh atribut yang tidak bisa berfungsi sebagai properti. Hanya saat bekerja dengan HTML, dan untuk atribut tertentu yang ditentukan dalam spesifikasi HTML DOM, Anda dapat menggunakan properti untuk membaca dan menetapkan atribut.
mgiuca
Saya mungkin salah paham, tapi itu masih membingungkan. tagName adalah properti Elementobjek dalam JavaScript, baik dalam HTML maupun XML DOM, dan Anda tidak bisa mendapatkan nama tag elemen melalui getAttribute("tagName")(kecuali di IE, yang implementasinya getAttribute()dan setAttribute()rusak), yang tampaknya berlawanan dengan apa yang Anda katakan.
Tim Down
3

Pertama, coba ubah <a>Link</a>ke <span id=test><a>Link</a></span>.

Kemudian, tambahkan sesuatu seperti ini di fungsi javascript yang Anda panggil:

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

Dengan cara ini tautannya akan terlihat seperti ini:

<a href="somelink">Link</a>
Rahul Sudha
sumber
Hai. Selamat datang di Stackoverflow. Pertanyaan OP tampaknya tentang bagaimana menambahkan hrefke tag yang ada a ( pada dasarnya saya ingin menambahkan atribut href ke <a> </a> secara dinamis ). Namun, jawaban ini tampaknya akan menjelaskan bagaimana membuat sebuah atag dengan href.
Moishe Lipsker
1 
document.getElementById('link-id').href = "new-href";

Saya tahu ini adalah posting lama, tapi ini satu kalimat yang mungkin lebih cocok untuk beberapa orang.

noɥʇʎԀʎzɐɹƆ
sumber