Как создать ссылку с помощью JavaScript?
У меня есть строка заголовка и строка для ссылки. Я не уверен, как соединить их вместе, чтобы создать ссылку на странице с помощью Javascript. Любая помощь приветствуется.
EDIT1: добавление более подробной информации к вопросу.
Причина, по которой я пытаюсь понять это, заключается в том, что у меня есть rss-канал и список заголовков И URL-адресов. Я хотел бы связать названия с URL, чтобы сделать страницу полезной.
EDIT2: я использую jQuery, но совершенно новый для него и не был знаю, что это может помочь в этой ситуации.
7 ответов:
<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>
С 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- это переменная, которая содержит текст, который будет отображаться в элементе.
создание ссылок с помощью 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>
есть несколько способов:
Если вы хотите использовать raw 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>");
динамически создать гиперссылку с raw JavaScript:
var anchorElem = document.createElement('a'); anchorElem.setAttribute("href", yourLink); anchorElem.innerHTML = yourLinkText; document.body.appendChild(anchorElem); // append your new link to the body
<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-консоли вы можете использовать
$("body")вместоdocument.querySelector("body")A_$ = document.querySelectorбудет "честь" ваши усилия с незаконным вызов ошибка при первом использовании. Это потому, что задание просто "захватывает".querySelector (ссылка на класс метод). С.bind(...вы также будете включать контекст (здесь этоdocument) и объект метод, который будет работать, как вы могли бы ожидать.
Comments