如何在数组中添加超链接(Javascript）

How to add hyperlink in array (Javascript)

本文关键字：超链接 Javascript 添加 数组      更新时间：2023-09-26

我有一个随机报价生成器脚本，我需要为每个报价添加超链接。问题 - 我不知道如何为我的生活做到这一点。

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

您可以将 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 属性。在数组中，我保留包含文本和链接属性的对象

还有一件事。使用新数组创建数组比使用 [] 慢。检查此 https://jsperf.com/new-array-vs-literal/15

相关文章：