JavaScript kullanarak nasıl bağlantı oluşturabilirim?

128

Bir başlık için bir dizem ve bir bağlantı için bir dizem var. Javascript kullanarak bir sayfada bir bağlantı oluşturmak için bu ikisini nasıl bir araya getireceğimi bilmiyorum. Herhangi bir yardım takdir edilmektedir.

DÜZENLEME1: Soruya daha fazla ayrıntı ekleniyor. Bunu anlamaya çalışmamın nedeni, bir RSS beslemem olması ve bir başlık ve URL listesine sahip olmam. Sayfayı kullanışlı hale getirmek için başlıkları URL'ye bağlamak istiyorum.

DÜZENLEME2: jQuery kullanıyorum ama tamamen yeniyim ve bu durumda yardımcı olabileceğinin farkında değildim.

— Xavier
kaynak

RSS beslemesini jQuery veya başka bir şeyle mi yüklüyorsunuz (Mootools, Dojo, Atlas, vb.)? Sayfa yüklemesi sırasında elde edilen üçüncü taraf RSS listesine dayalı olarak dinamik olarak bağlantı etiketleri oluşturmaya çalışıyorsanız, öğeyi eklemek için jQuery kitaplığını veya diğerini kullanmanızı öneririm. Bu durumda ayrıntılar, ne yapılması gerektiğini bilmek için önemlidir. Ancak, DOM yöntemleri faydalı bir örnektir.

— Jared Farrish

bu bağlantıyı deneyin faydalı olabileceğini düşünüyorum

— 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
kaynak

1

Bu, bir sayfaya bağlantı etiketi eklemek için DOM yöntemlerini kullanmanın oldukça genel bir örneğidir. Örneğin, appendChild yöntemi bir liste öğesi, TD veya sayfadaki başka bir öğe olabilir. Bakınız: quirksmode.org

— Jared Farrish

5

@Nadu - Lütfen cevabımı düzenlemeyi bırakın. Belirli bir şeyin söylenmesini istiyorsanız, kendinizinkini ekleyin; garanti edecek kadar "farklı" değilse, bir düzenlemeyi gerektirecek kadar farklı değildir.

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview Bir plunker örneği oluşturdum.

— Harold Castillo

61

JavaScript ile

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

veya @travis'in önerdiği gibi :

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>

JQuery ile

$('<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);

Yukarıdaki tüm örneklerde, çapayı yalnızca 'gövdeye' değil, herhangi bir öğeye ekleyebilirsiniz ve bağlantı desiredLinköğenizin işaret ettiği adresi desiredTexttutan ve içinde görüntülenecek metni tutan bir değişkendir. çapa elemanı.

— gion_13
kaynak

3

Sanırım dışarıda bıraktığın tek şey:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— Travis

1

XSS'den kaçınmak için, HTML oluştururken dize birleştirmeden ( +) kaçınmalısınız .innerHTML. JQuery ile .attr("href", desiredLink)ve .text(desiredText)burada istediğiniz şey bunlar.

— Wes Turner

15

JavaScript kullanarak bağlantılar oluşturun:

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

VEYA

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

VEYA

<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
kaynak

12

Birkaç yol var:

Ham Javascript kullanmak istiyorsanız (JQuery gibi bir yardımcı olmadan), aşağıdaki gibi bir şey yapabilirsiniz:

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

Diğer yöntem ise bağlantıyı doğrudan belgeye yazmaktır:

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

— roopinder
kaynak

İlk seçeneği kesinlikle daha çok seviyorum. Bunun için +1, ancak JS ve HTML'nin karıştırılması, ayrı olması gereken içerik ve davranışı karıştırır. Abartma, bu bir bakım kabusuna yol açabilir.

— jmort253

İlk seçeneği de tercih etme eğilimindeyim, ancak belki de aynı etkiyi elde etmek için JQuery kullanıyorum (okunabilirlik ve bakım kolaylığı için).

— Roopinder

1

Muhtemelen 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>

Snippet'i genişlet

Bağlantı Nesnesi, bağın, metninin ayarlanması için kendi * (miras alınan) * özelliklerine sahiptir. Bu yüzden sadece onları kullanın. .setAttribute daha geneldir ancak normalde buna ihtiyacınız yoktur. a.title ="Blah"aynısını yapacak ve daha net! .SetAttribute gerektirecek bir durum şudur :var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Protokolü açık bırakın. Onun yerineHttp: //example.com/path yalnızca //example.com/path kullanmayı düşünün. Example.com'a http: ve https: ile erişilip erişilemeyeceğini kontrol edin, ancak sitelerin% 95'i her ikisinde de çalışacaktır.
OffTopic: Bu, JS'de bağlantı oluşturmakla pek alakalı değil, ancak bilmek iyi olabilir: Bazen$("body"),document.querySelector("body")Ayerinekullanabileceğiniz chromes geliştirme konsolunda olduğu gibi, ilk kez kullandığınızda_$ = document.querySelectorbir Yasadışı çağrı hatasıylaçabalarınızı 'onurlandırır'. Bunun nedeni, atamanın yalnızca .querySelector'ı ( sınıf yönteminebir ref)' kapmasıdır '. Bununla birlikte.bind(...bağlamı da dahil edeceksiniz (işte buradadocument) ve bir beklediğiniz gibi çalışacak nesne yöntemi elde edeceksiniz.

— Nadu
kaynak

3

Ham JavaScript ile dinamik olarak bir köprü oluşturun:

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

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

— jmort253
kaynak

`AnchorElem.text = yourLinkText; `daha net olacak innerHTML yerine. Ve evet, sizinLinkText'iniz belki "<- bu harika!" İse ne olacağını düşünün.

— Nadu

-5

Bunu içine yapıştırın:

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

— zerodunwash
kaynak

OP, açıkça JavaScript ile (HTML değil) bir bağlantı oluşturulmasını istiyor!

— hatef