从 javascript 数组生成可点击的 HTML 链接答案

【问题标题】：Generating a clickable HTML link from a javascript array从 javascript 数组生成可点击的 HTML 链接
【发布时间】：2020-12-10 23:44:43
【问题描述】：

我在网上找到了可以从数组中选择和打印随机名称的代码，我正在尝试修改它以打印链接而不是名称。我希望该链接是可点击的，因为它通常在 HTML 中。但是，我不确定如何修改 javascript 来做到这一点。

这是我在下面做的方法。但结果是它只是在页面上打印 HTML 代码，而不是交互式链接。有什么更好的方法来做到这一点？

let btnRandom = document.querySelector('button');
let result = document.querySelector('h1');

let links = ['https://www.nytimes.com/2019/09/19/climate/air-travel-emissions.html', 'Link2', 'Link3', 'Link4', 'Link5', 'Link6', 'Link7'];

function getRandomNumber(min, max) {
  let step1 = max - min + 1;
  let step2 = Math.random() *step1;
  let result = Math.floor(step2) + min;

  return result;
}

btnRandom.addEventListener('click', () => {
  let index = getRandomNumber(0, links.length-1);
  result.innerText = '<a href ="' + links[index] + '"</a>';
});

我当前代码的结果：

【问题讨论】：

标签： javascript html arrays

【解决方案1】：

您可以使用 innerHTML 属性而不是 innerText 将链接附加为实际的 HTML 元素。

或者按照here 提到的方法创建一个链接元素并将其附加到“结果”节点。

【讨论】：

【解决方案2】：

使用Document.createElement() 创建一个<a> 元素。然后使用Node.appendChild() 将元素附加到h1 节点

let btnRandom = document.querySelector('button');
let result = document.querySelector('h1');

const links = ['https://www.nytimes.com/2019/09/19/climate/air-travel-emissions.html', 'Link2', 'Link3', 'Link4', 'Link5', 'Link6', 'Link7'];

function getRandomNumber(min, max) {
  let step1 = max - min + 1;
  let step2 = Math.random() *step1;
  let result = Math.floor(step2) + min;
  return result;
};

btnRandom.addEventListener('click', () => {
  let index = getRandomNumber(0, links.length-1);
  const a = document.createElement("a");
  a.textContent= links[index];
  a.href= links[index];
  result.appendChild(a);
});

<button>Ramdom Link</button>
<h1></h1>

【讨论】：