堆棧內存溢出
  簡體   English   中英

如何使用 javascript 創建鏈接？

[英]How do I create a link using javascript?

 原文  2011-01-23 07:37:37  5   8    javascript/ jquery/ html/ dom/ hyperlink

問題描述

我有一個標題字符串和一個鏈接字符串。 我不確定如何將兩者放在一起使用 Javascript 在頁面上創建鏈接。 任何幫助表示贊賞。

EDIT1：為問題添加更多細節。 我試圖弄清楚這一點的原因是因為我有一個 RSS 提要和一個標題和 URL 列表。 我想將標題鏈接到 URL 以使頁面有用。

EDIT2：我正在使用 jQuery，但對它完全陌生，不知道它在這種情況下會有所幫助。

8 個解決方案

解決方案1
 266 已采納  2011-01-23 07:46:28

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

解決方案2
 68  2011-01-23 08:50:00

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

在上述所有示例中，您可以將錨附加到任何元素，而不僅僅是“主體”，並且desiredLink是一個變量，用於保存您的錨元素指向的地址，而desiredText是一個變量，用於保存將要發送的文本顯示在錨元素中。

解決方案3
 18  2011-01-23 07:42:07

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

解決方案4
 15  2011-01-23 07:52:27

有幾種方法：

如果您想使用原始 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>");

解決方案5
 5  2017-02-01 17:04:16

 <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\'sa link' ); </script>

  1. 'Anchor Object' 有它自己的*(inherited)* 屬性來設置鏈接，它的文本。 所以只需使用它們。 .setAttribute更通用，但您通常不需要它。 a.title ="Blah"會做同樣的事情，而且更清楚！ 那么需要.setAttribute的情況是這樣的： var myAttrib = "title"; a.setAttribute( myAttrib , "Blah") var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

  2. 讓協議保持打開狀態。 而不是http://example.com/path考慮只使用 //example.com/path。 檢查 example.com 是否可以通過http:和https:訪問，但 95 % 的網站都可以在兩者上運行。

  3. OffTopic：這與在 JS 中創建鏈接並不真正相關，但也許很高興知道：有時就像在 chrome 開發控制台中，您可以使用$("body")而不是document.querySelector("body") A _$ = document.querySelector將在您第一次使用它時以非法調用錯誤“尊重”您的努力。 那是因為分配只是“抓取” .querySelector （對類方法的引用）。 使用.bind(...您還將涉及上下文（這里是document ），並且您將獲得一個可以按預期工作的對象方法。

解決方案6
 4  2011-01-23 07:46:38

使用原始 JavaScript 動態創建超鏈接：

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

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

解決方案7
 0  2022-06-04 16:52:21

創建元素的一種骯臟但快速的方法：


const linkHTML = `<a
  class="my-link"
  style="position: absolute; right: 0"
  href="https://old.reddit.com"
  title="Go to old reddit"
>
  Old Reddit
</a>`;

  // create element
  const linkEl = strToElement(linkHTML);

  // add element to document.body
  document.body.appendChild(linkEl);

// utility function that converts a string to HTML element
function strToElement(s) {
  let e = document.createElement('div');
  const r = document.createRange();
  r.selectNodeContents(e);
  const f = r.createContextualFragment(s);
  e.appendChild(f);

  e = e.firstElementChild;
  return e;
}

解決方案8
 -7  2016-04-24 18:11:58

你把它貼在里面：

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在javascript中創建到pdf的鏈接？ 我需要使用帶有奇怪的 Google 電子表格鏈接的 Javascript 創建一個 HTML 表格。 我該怎么做呢？ 如何在使用javascript的圖片中使用指定的鏈接組創建隨機鏈接？ 使用JavaScript時，如何創建自動單擊鏈接並在新標簽頁中打開它的代碼？ 如何在 Javascript 中不顯示 URL 的情況下創建鏈接？ 如何創建指向頁面的鏈接並強制它立即執行 javascript 如何使用JavaScript創建rss / xml鏈接元素 如何使用javascript創建此效果？ 如何在Angular 2 / Ionic 2中使用插值創建鏈接標簽 如何使用javascript附加li和link元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM