Bagaimana cara membuat tautan menggunakan javascript?


128

Saya memiliki string untuk judul dan string untuk tautan. Saya tidak yakin bagaimana menggabungkan keduanya untuk membuat link pada halaman menggunakan Javascript. Setiap bantuan dihargai.

EDIT1: Menambahkan lebih banyak detail ke pertanyaan. Alasan saya mencoba mencari tahu ini adalah karena saya memiliki RSS feed dan memiliki daftar judul dan URL. Saya ingin menautkan judul ke URL agar halaman tersebut berguna.

EDIT2: Saya menggunakan jQuery tetapi saya benar-benar baru dan tidak sadar itu bisa membantu dalam situasi ini.


Apakah Anda memuat RSS feed dengan jQuery atau sesuatu (Mootools, Dojo, Atlas, dll ...)? Jika Anda mencoba membuat tag jangkar secara dinamis berdasarkan daftar RSS pihak ketiga yang diperoleh saat pemuatan halaman, saya sarankan menggunakan pustaka jQuery atau lainnya untuk menambahkan elemen. Detail dalam hal ini penting untuk diketahui apa yang perlu dilakukan. Namun, metode DOM adalah ilustrasi yang berguna.
Jared Farrish

coba tautan ini Saya pikir ini bisa bermanfaat
Yitzhak Weinberg

Jawaban:


227
<html>
  <head></head>
  <body>
    <script>
      var a = document.createElement('a');
      var linkText = document.createTextNode("my title text");
      a.appendChild(linkText);
      a.title = "my title text";
      a.href = "http://example.com";
      document.body.appendChild(a);
    </script>
  </body>
</html>

1
Ini adalah contoh yang sangat umum dalam menggunakan metode DOM untuk menambahkan tag anchor ke halaman. Misalnya, metode appendChild bisa menjadi elemen daftar, TD, atau elemen lain di dalam halaman. Lihat: quirksmode.org
Jared Farrish

5
@Nadu - Tolong berhenti mengedit jawaban saya. Jika Anda ingin mengatakan sesuatu yang spesifik, tambahkan salah satu milik Anda; jika tidak cukup "berbeda" untuk menjaminnya, itu tidak cukup berbeda untuk menjamin pengeditan.
Jared Farrish


61

Dengan JavaScript

  1. var a = document.createElement('a');
    a.setAttribute('href',desiredLink);
    a.innerHTML = desiredText;
    // apend the anchor to the body
    // of course you can append it almost to any other dom element
    document.getElementsByTagName('body')[0].appendChild(a);
  2. document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';

    atau, seperti yang disarankan oleh @travis :

    document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);
  3. <script type="text/javascript">
    //note that this case can be used only inside the "body" element
    document.write('<a href="'+desiredLink+'">'+desiredText+'</a>');
    </script>

Dengan JQuery

  1. $('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));
  2. $('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));
  3. var a = $('<a />');
    a.attr('href',desiredLink);
    a.text(desiredText);
    $('body').append(a);

Dalam semua contoh di atas, Anda dapat menambahkan jangkar ke elemen apa pun, tidak hanya ke 'body', dan desiredLinkmerupakan variabel yang menyimpan alamat yang ditunjuk oleh elemen jangkar Anda, dan desiredTextmerupakan variabel yang menyimpan teks yang akan ditampilkan di elemen jangkar.


3
Saya pikir satu-satunya yang Anda tinggalkan adalah:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);
travis

1
Untuk menghindari XSS, Anda harus menghindari penggabungan string ( +) dan .innerHTMLsaat membuat HTML. Dengan jQuery, .attr("href", desiredLink)dan .text(desiredText)apa yang Anda inginkan di sini.
Wes Turner

15

Buat tautan menggunakan JavaScript:

<script language="javascript">
<!--
document.write("<a href=\"www.example.com\">");
document.write("Your Title");
document.write("</a>");
//-->
</script>

ATAU

<script type="text/javascript">
document.write('Your Title'.link('http://www.example.com'));
</script>

ATAU

<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Google';
newlink.setAttribute('title', 'Google');
newlink.setAttribute('href', 'http://google.com');
document.body.appendChild(newlink);
</script>

12

Ada beberapa cara:

Jika Anda ingin menggunakan Javascript mentah (tanpa bantuan seperti JQuery), maka Anda dapat melakukan sesuatu seperti:

var link = "http://google.com";
var element = document.createElement("a");
element.setAttribute("href", link);
element.innerHTML = "your text";

// and append it to where you'd like it to go:
document.body.appendChild(element);

Metode lainnya adalah menulis tautan langsung ke dalam dokumen:

document.write("<a href='" + link + "'>" + text + "</a>");

Saya pasti lebih suka opsi pertama. 1 untuk itu, tetapi mencampurkan JS dan HTML mencampur konten dan perilaku, yang seharusnya terpisah. Jika dilakukan berlebihan, hal itu dapat menyebabkan mimpi buruk pemeliharaan.
jmort253

Saya cenderung lebih memilih opsi pertama juga, tetapi mungkin menggunakan JQuery untuk mencapai efek yang sama (untuk keterbacaan dan kemudahan pemeliharaan).
Roopinder

1
Anda mungkin harus menghindari penggunaan document.write stackoverflow.com/questions/4520440/…
TryHarder

4

    <script>
      _$ = document.querySelector  .bind(document) ;

        var AppendLinkHere = _$("body") // <- put in here some CSS selector that'll be more to your needs
        var a   =  document.createElement( 'a' )
        a.text  = "Download example" 
        a.href  = "//bit\.do/DeezerDL"

        AppendLinkHere.appendChild( a )
        

     // a.title = 'Well well ... 
        a.setAttribute( 'title', 
                         'Well well that\'s a link'
                      );
    </script>

  1. 'Objek Jangkar' memiliki properti * (diwariskan) * sendiri untuk menyetel tautan, teksnya. Jadi gunakan saja. .setAttribute lebih umum tetapi Anda biasanya tidak membutuhkannya. a.title ="Blah"akan melakukan hal yang sama dan lebih jelas! Nah situasi yang akan menuntut .setAttribute adalah ini:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

  2. Biarkan protokol terbuka. Daripada http: //example.com/path, pertimbangkan untuk hanya menggunakan //example.com/path. Periksa apakah example.com dapat diakses melalui http: serta https: tetapi 95% situs akan berfungsi di keduanya.

  3. OffTopic: Itu tidak benar-benar relevan tentang membuat tautan di JS tetapi mungkin baik untuk diketahui: Terkadang seperti di chromes dev-console, Anda dapat menggunakan$("body")alih-alihdocument.querySelector("body")A_$ = document.querySelectorakan 'menghormati' upaya Anda dengankesalahan pemanggilan Illegal saat pertama kali Anda menggunakannya. Itu karena tugas hanya 'ambil' .querySelector ( referensi ke metode kelas ). Dengan.bind(...Anda juga akan melibatkan konteks (ini diadocument) dan Anda mendapatkanmetode objek yang akan bekerja seperti yang Anda harapkan.


3

Buat hyperlink secara dinamis dengan JavaScript mentah:

   var anchorElem = document.createElement('a');
   anchorElem.setAttribute("href", yourLink);
   anchorElem.innerHTML = yourLinkText;

   document.body.appendChild(anchorElem); // append your new link to the body

Gunakan `anchorElem.text = yourLinkText; `daripada innerHTML yang akan lebih jelas. Dan ya pertimbangkan apa yang akan terjadi jika yourLinkText mungkin "<- itu keren!"
Nadu

-4

Anda menempelkannya di dalam:

<A HREF = "index.html">Click here</A>


OP secara eksplisit meminta untuk membuat link dengan JavaScript (bukan HTML)!
hatef
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.