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.

— Xavier
sumber

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

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>

— Jared Farrish
sumber

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

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview Saya telah membuat contoh plunker.

— Harold Castillo

61

Dengan JavaScript

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);

document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';

atau, seperti yang disarankan oleh @travis :

document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

<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

$('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));

$('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));

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.

— gion_13
sumber

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>

— Naveed
sumber

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>");

— Roopinder
sumber

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>

Luaskan cuplikan

'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")
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.
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.

— Nadu
sumber

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

— jmort253
sumber

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>

— zerodunwash
sumber

OP secara eksplisit meminta untuk membuat link dengan JavaScript (bukan HTML)!

— hatef