如何在數組中添加超鏈接（Javascript）

我有一個隨機的報價生成器腳本，我需要爲每個報價添加超鏈接。這個問題 - 我無法弄清楚如何爲我的生活做到這一點。如何在數組中添加超鏈接（Javascript）

我是JavaScript的新手，但經過四處搜索，認爲有一個簡單的解決方案，我的問題，我找不到一個可行的答案。

我該如何着手在數組中添加超鏈接？我會很感激。這可能也很簡單。

這裏是隨機引用生成器的頁面，我發佈了下面的代碼。謝謝。 https://www.hscripts.com/scripts/JavaScript/random-quote-generator.php

我也發佈了下面的代碼。

<style> 
    .row { 
     padding-left: 10px; 
     background-color: white; 
     font-family: verdana, san-serif; 
     font-size: 13px; 
    } 
</style> 

<!-- Script by hscripts.com --> 
<script type="text/javascript"> 
    var arr = new Array(); 

    arr.push("Javascript is different from Java"); 
    arr.push("Javascript is different from Java"); 
    arr.push("Javascript is different from Java"); 
    arr.push("CSS - Cascading Style Sheet"); 
    arr.push("HTML is a platform independent language"); 

    function rotate() { 
     var num = Math.round(Math.random() * 3); 
     add(num); 
    } 

    function add(i) { 
     var chi = document.createTextNode(arr[i]); 
     var tab1 = document.getElementById("add1"); 
     while (tab1.hasChildNodes()) { 
      tab1.removeChild(tab1.firstChild); 
     } 
     tab1.appendChild(chi);   
    } 
</script> 
<!-- Script by hscripts.com --> 

<table align=center style="background-color:#C0C0C0"> 
    <tr> 
     <td background-color:#c0c0c0 align=center width=300 style="font-family:Times New Roman;"> 
      <b>Random Quote Generator</b> 
     </td> 
    </tr> 
    <tr> 
     <td id=add1 class=row width=300 align=center>Click Next to Display Random message</td> 
    </tr> 
    <tr> 
     <td align=center> 
      <input type=button value="Next" border=0 onclick="rotate()"> 
     </td> 
    </tr> 
</table>

來源

2016-03-13 john

您可以在您的陣列中保留html代碼，例如

arr.push('<a href="http://google.pl">CSS</a>');

但我不喜歡混合html代碼與js。看看我上的jsfiddle https://jsfiddle.net/xoL2bbtd/

解決方案，我的小修改您的陣列，並添加功能

function add(i) { 
var chi = document.createElement('a'); 
chi.textContent = arr[i].text; 
chi.setAttribute('href', arr[i].link); 
var tab1 = document.getElementById("add1"); 
if (tab1.hasChildNodes()) { 
    tab1.removeChild(tab1.firstChild); 
} 
tab1.appendChild(chi); 
}

創建錨元素，並將href屬性。在數組中我保留包含文本和鏈接屬性的對象

還有一件事。使用new Array創建數組比使用[]更慢。檢查這https://jsperf.com/new-array-vs-literal/15

來源

2016-03-13 20:40:17 RobHil

搶，這是完美的！謝謝你這樣直截了當的答覆。 – john

我忘了問 - 我如何擁有它，因此鏈接在新標籤中打開？我知道在HTML它的目標=「_空白」，但搜索25分鐘後，我似乎無法弄清楚如何在JavaScript中實現這一點。對不起 - 我希望事先提及。 – john

所以我做了一些測試，並找出了一些可行的方法 - 使鏈接在新標籤中打開。我在代碼中添加了一行：chi.setAttribute（'target'，'_blank'）; ....我想這是正確的，因爲它的工作。 – john

如何在數組中添加超鏈接（Javascript）

回答

相關問題