如何在数组中添加超链接（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）

回答

相关问题