從 javascript 數組生成可點擊的 HTML 鏈接

Question

我在網上找到了可以 select 並從數組中打印隨機名稱的代碼，我正在嘗試修改它以打印鏈接而不是名稱。 我希望該鏈接是可點擊的，因為它通常在 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>';
});

我當前代碼的結果：

Answer 1

您可以使用 innerHTML 屬性而不是 innerText 到 append 鏈接作為實際的 HTML 元素。

或者，也可以按照此處提到的方法創建一個鏈接元素並將 append 連接到“結果”節點。

Answer 2

使用Document.createElement()創建一個<a>元素。 然后 append 使用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>