从 JavaScript 数组生成可点击的 HTML 链接。

Question

我在网上找到了一段代码，可以从数组中选择并打印随机名称，我想修改它来打印一个链接而不是一个名称。 我希望该链接像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>';
});

我的当前代码的结果：

- S Zombek

Answer 1

你可以使用innerHTML属性而不是innerText来将链接作为实际的HTML元素添加。

或者，您可以按照此处提到的方法在JavaScript中创建链接并将其附加到“result”节点。

- plc-dev

Answer 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>

- lissettdm