Как мне создать ссылку, используя JavaScript? - PullRequest
Новая
       8

Как мне создать ссылку, используя JavaScript?

107 голосов
/ 23 января 2011

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

РЕДАКТИРОВАТЬ1: Добавление более подробной информации к вопросу.Причина, по которой я пытаюсь это выяснить, заключается в том, что у меня есть RSS-лента и список заголовков и URL-адресов.Я хотел бы связать заголовки с URL-адресом, чтобы сделать страницу полезной.

EDIT2: я использую jQuery, но совершенно не знаком с ней и не знал, что она может помочь в этой ситуации.

Ответы [ 7 ]

208 голосов
/ 23 января 2011 
<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>
55 голосов
/ 23 января 2011

с JavaScript 

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

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

    или, как предлагает @ travis : 

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

  3. <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 

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

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

  3. var a = $('<a />');
a.attr('href',desiredLink);
a.text(desiredText);
$('body').append(a);

Во всех приведенных выше примерах вы можете добавить привязку к любому элементу, а не только к «body», и desiredLink - это переменная, которая содержит адрес, на который указывает ваш элемент привязки, а desiredText - переменная содержит текст, который будет отображаться в элементе привязки.

15 голосов
/ 23 января 2011

Создание ссылок с использованием JavaScript: 

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

OR 

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

OR 

<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>
11 голосов
/ 23 января 2011

Есть несколько способов:

Если вы хотите использовать сырой 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>");
4 голосов
/ 01 февраля 2017 

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

  1. «Объект привязки» имеет свои * (унаследованные) * свойства для установки ссылки, ее текста. Так что просто используйте их. .setAttribute является более общим, но обычно вам это не нужно. a.title ="Blah" сделает то же самое и станет более понятным! Ну, ситуация, которая потребует .setAttribute , такова: var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

  2. Оставьте протокол открытым. Вместо http: // example.com/path подумайте о том, чтобы просто использовать //example.com/path. Проверьте, доступен ли сайт example.com http: , а также https: , но 95% сайтов будут работать на обоих.

  3. OffTopic: Это не очень важно при создании ссылок в JS но может быть полезно знать: Иногда, как и в консоли разработчика chromes, вы можете использовать $("body") вместо document.querySelector("body") A _$ = document.querySelector, чтобы «почтить» ваши усилия с ошибкой Illegal invocation при первом использовании. Это потому, что присваивание просто «захватывает» .querySelector (ссылка на метод class ). С .bind(... вы также включите контекст (здесь это document), и вы получите метод object , который будет работать так, как вы ожидаете.

3 голосов
/ 23 января 2011

Динамически создать гиперссылку с необработанным JavaScript: 

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

   document.body.appendChild(anchorElem); // append your new link to the body
0 голосов
/ 24 апреля 2016

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...