Як створити посилання за допомогою javascript?

128

У мене є рядок для заголовка і рядок для посилання. Я не впевнений, як з'єднати ці два, щоб створити посилання на сторінці за допомогою Javascript. Будь-яка допомога вдячна.

EDIT1: Додавання детальніше до питання. Я намагаюся розібратися в цьому, тому що у мене є RSS-канал і список списків URL-адрес назв та адрес. Я хотів би прив’язати заголовки до URL-адреси, щоб сторінка була корисною.

EDIT2: Я використовую jQuery, але я абсолютно новий, і не знав, що може допомогти в цій ситуації.

— Ксав'є
джерело

Ви завантажуєте RSS-канал за допомогою jQuery чи чогось іншого (Mootools, Dojo, Atlas тощо)? Якщо ви намагаєтеся динамічно створювати якірні теги на основі стороннього списку RSS, придбаного під час завантаження сторінки, я б запропонував використовувати для додавання елемента бібліотеку jQuery або іншу. Деталі в цьому випадку важливі, щоб знати, що потрібно зробити. Однак методи DOM є корисною ілюстрацією.

— Джаред Фарріш

спробуйте це посилання Я думаю, що це може бути вигідним

— Іцхак Вайнберг

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

Це дуже загальний приклад використання методів DOM для додавання тегу прив’язки до сторінки. Наприклад, метод appendChild може бути елементом списку, TD або іншим елементом сторінки. Дивіться: quirksmode.org

— Джаред Фарріш

5

@Nadu - Будь ласка, припиніть редагувати мою відповідь. Якщо ви хочете сказати конкретну річ, додайте свою власну; якщо він недостатньо "інший", щоб гарантувати його, він недостатньо інший, щоб гарантувати редагування.

— Джаред Фарріш

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview Мені створено приклад планку.

— Гарольд Кастільо

61

За допомогою 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>';

або, як запропонував @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>

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

У всіх вищенаведених прикладах ви можете додавати якір до будь-якого елемента, а не лише до 'body', і desiredLinkце змінна, яка містить адресу, на яку вказує ваш елемент якоря, і desiredTextє змінною, яка містить текст, який буде відображатися в елемент якоря.

— gion_13
джерело

3

Я думаю, що єдине, що ти покинув, це:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— травіс

1

Щоб уникнути XSS, слід уникати конкатенації рядків ( +) та .innerHTMLпід час створення HTML. З jQuery .attr("href", desiredLink)і.text(desiredText) ви тут хочете.

— Уес Тернер

15

Створення посилань за допомогою JavaScript:

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

АБО

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

АБО

<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
джерело

12

Є кілька способів:

Якщо ви хочете використовувати сирий Javascript (без такого помічника, як JQuery), ви можете зробити щось на кшталт:

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

Інший спосіб полягає в тому, щоб записати посилання безпосередньо в документ:

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

— Roopinder
джерело

Я, безумовно, краще подобається перший варіант. +1 для цього, але змішування JS та HTML змішує вміст та поведінку, які мають бути окремими. Перестаралися, що може призвести до кошмару технічного обслуговування.

— jmort253

Я, як правило, віддаю перевагу і першому варіанту, але, можливо, використовую JQuery для досягнення того ж ефекту (для читабельності та простоти обслуговування).

— Roopinder

1

Ви , ймовірно , слід уникати використання 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>

Розгорніть фрагмент

'Об'єкт прив’язки' має власні * (успадковані) * властивості для встановлення посилання, його тексту. Тому просто використовуйте їх. .setAttribute є загальнішим, але він вам зазвичай не потрібен. a.title ="Blah"зробимо те саме і зрозуміліше! Ну ситуація, яка вимагатиме .setAttribute така:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Залиште протокол відкритим. Замість http: //example.com/path подумайте просто використовувати //example.com/path. Перевірте, чи можна отримати доступ до example.com http: а також https: але 95% сайтів працюватимуть на обох.
OffTopic: Це не дуже важливо для створення посилань у JS, але, можливо, добре знати: Ну, іноді, як у хроматичній консолі dev, яку можна використовувати$("body")замістьdocument.querySelector("body")A,_$ = document.querySelectorбуде "шанувати" ваші зусилля зпомилковою помилкою виклику під час першого використання. Це тому, що присвоєння просто "захоплює" .querySelector (посилання на метод класу ). З.bind(...вами також будете залучати контекст (ось вінdocument), і ви отримаєтеметод об'єкта, який буде працювати так, як ви цього могли очікувати.

— Наду
джерело

3

Динамічно створюйте гіперпосилання з необробленим 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
джерело

Використовуйте `anchorElem.text = yourLinkText; `замість innerHTML, що буде більш зрозумілим. І так, подумайте, що станеться, якщо вашLinkText може бути "<- це круто!"

— Наду

-4

Ви вставляєте це всередину:

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

— zerodunwash
джерело

ОП явно просить створити посилання з JavaScript (не HTML)!

— hatef