gpt4 book ai didi

javascript - 如何在数组中添加超链接(Javascript)

转载 作者:行者123 更新时间:2023-11-30 00:12:17 26 4
gpt4 key购买 nike

我有一个随机报价生成器脚本,我需要为每个报价添加超链接。问题 - 我无法弄清楚如何在我的生活中完成这个。

我是 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);
}

我创建 anchor 元素并设置 href 属性。在数组中我保留包含文本和链接属性的对象

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

关于javascript - 如何在数组中添加超链接(Javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35975169/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com