Как создать ссылку с помощью javascript?

128

У меня есть строка для заголовка и строка для ссылки. Я не уверен, как соединить их вместе, чтобы создать ссылку на странице с помощью Javascript. Любая помощь приветствуется.

РЕДАКТИРОВАТЬ1: добавление более подробной информации к вопросу. Причина, по которой я пытаюсь это понять, заключается в том, что у меня есть 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

@ Наду - Пожалуйста, прекратите редактировать мой ответ. Если вы хотите, чтобы было сказано что-то конкретное, добавьте свое; если он недостаточно «отличается», чтобы гарантировать это, он недостаточно отличается, чтобы требовать редактирования.

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

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

Во всех приведенных выше примерах вы можете добавить привязку к любому элементу, а не только к `` телу '', и 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>

— Навид
источник

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, но, возможно, полезно знать: ну, иногда, например, в chromes dev-console, вы можете использовать$("body")вместоdocument.querySelector("body")A,_$ = document.querySelectorбудет «отмечать» ваши усилия сошибкой Illegal invocation при первом использовании. Это потому, что присвоение просто «захватывает» .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 это будет более понятно. И да, подумайте, что произойдет, если yourLinkText может быть "<- это круто!"

— Наду

-5

Вы вставляете это внутрь:

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

— zerodunwash
источник

OP явно просит создать ссылку с помощью JavaScript (не HTML)!

— hatef