Jak utworzyć łącze za pomocą javascript?

128

Mam ciąg dla tytułu i ciąg dla linku. Nie jestem pewien, jak połączyć te dwa elementy, aby utworzyć łącze na stronie za pomocą JavaScript. Każda pomoc jest mile widziana.

EDIT1: Dodanie więcej szczegółów do pytania. Powodem, dla którego próbuję to rozgryźć, jest to, że mam kanał RSS oraz listę tytułów i adresów URL. Chciałbym połączyć tytuły z adresem URL, aby strona była użyteczna.

EDIT2: Używam jQuery, ale jestem zupełnie nowy i nie wiedziałem, że może to pomóc w tej sytuacji.

— Xavier
źródło

Czy ładujesz kanał RSS za pomocą jQuery czy coś (Mootools, Dojo, Atlas, itp.)? Jeśli próbujesz dynamicznie tworzyć tagi kotwicy na podstawie listy RSS innej firmy uzyskanej podczas ładowania strony, sugerowałbym użycie biblioteki jQuery lub innej, aby dodać element. Szczegóły w tym przypadku są ważne, aby wiedzieć, co należy zrobić. Jednak metody DOM są użyteczną ilustracją.

— Jared Farrish

spróbuj tego linku Myślę, że to może być korzystne

— 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
źródło

1

To jest bardzo ogólny przykład użycia metod DOM w celu dodania tagu kotwicy do strony. Na przykład metoda appendChild może być elementem listy, TD lub innym elementem na stronie. Zobacz: quirksmode.org

— Jared Farrish

5

@Nadu - proszę przestań edytować moją odpowiedź. Jeśli chcesz, aby zostało powiedziane coś konkretnego, dodaj własną; jeśli nie jest wystarczająco „inny”, aby to uzasadnić, nie jest na tyle inny, aby uzasadnić edycję.

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview Utworzono przykład plunkera.

— Harold Castillo

61

Z JavaScriptem

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

lub, jak sugeruje @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>

Dzięki 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);

We wszystkich powyższych przykładach możesz dołączyć kotwicę do dowolnego elementu, nie tylko do „treści”, i desiredLinkjest to zmienna, która zawiera adres, na który wskazuje element kotwicy, i desiredTextjest zmienną, która przechowuje tekst, który będzie wyświetlany w element kotwicy.

— gion_13
źródło

3

Myślę, że jedyne, które pominąłeś, to:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— travis

1

Aby uniknąć XSS, powinieneś unikać konkatenacji ciągów ( +) i .innerHTMLpodczas budowania HTML. Z jQuery .attr("href", desiredLink)i .text(desiredText)właśnie tego chcesz.

— Wes Turner,

15

Utwórz linki za pomocą JavaScript:

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

LUB

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

LUB

<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
źródło

12

Jest kilka sposobów:

Jeśli chcesz używać surowego JavaScript (bez pomocnika, takiego jak JQuery), możesz zrobić coś takiego:

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

Inną metodą jest wpisanie linku bezpośrednio w dokumencie:

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

— Roopinder
źródło

Zdecydowanie bardziej podoba mi się pierwsza opcja. +1 za to, ale mieszanie JS i HTML łączy zawartość i zachowanie, które powinny być oddzielne. Przerobiony, który może prowadzić do koszmaru związanego z konserwacją.

— jmort253

Preferuję również pierwszą opcję, ale być może używam JQuery, aby osiągnąć ten sam efekt (dla czytelności i łatwości konserwacji).

— Roopinder,

1

Prawdopodobnie powinieneś unikać korzystania z 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>

Rozwiń fragment

Obiekt „Anchor” ma własne * (dziedziczone) * właściwości służące do ustawiania łącza, czyli jego tekstu. Więc po prostu ich używaj. .setAttribute jest bardziej ogólny, ale normalnie go nie potrzebujesz. a.title ="Blah"zrobi to samo i jest bardziej jasne! Cóż, sytuacja, która będzie wymagać .setAttribute, jest taka:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Pozostaw protokół otwarty. Zamiast http: //example.com/path rozważ użycie po prostu //example.com/path. Sprawdź, czy do witryny example.com można uzyskać dostęp przez http: i https: ale 95% witryn będzie działać na obu.
OffTopic: To nie jest zbyt istotne w tworzeniu linków w JS, ale może dobrze wiedzieć: Cóż, czasami, tak jak w konsoli programisty Chromes, której możesz użyć$("body")zamiastdocument.querySelector("body")A,``_$ = document.querySelectoruhonoruje '' twoje wysiłkibłędem Illegal invocation przy pierwszym użyciu. Dzieje się tak, ponieważ przypisanie po prostu „pobiera” .querySelector (odniesienie do metody klasy ). Z.bind(...tym również zaangażujesz kontekst (tutaj jestdocument) i otrzymaszmetodę obiektową , która będzie działać tak, jak można się tego spodziewać.

— Nadu
źródło

3

Dynamicznie utwórz hiperłącze za pomocą surowego JavaScript:

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

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

— jmort253
źródło

Użyj `anchorElem.text = yourLinkText; `zamiast innerHTML będzie jaśniejsze. I tak, zastanów się, co się stanie, jeśli TwójTekstLink to może „<- to super!”

— Nadu

-4

Wklej to w środku:

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

— zerodunwash
źródło

OP wyraźnie prosi o utworzenie linku za pomocą JavaScript (nie HTML)!

— hatef