使用 JavaScript 将 href 添加到锚点答案

【问题标题】：Adding href to anchor using JavaScript使用 JavaScript 将 href 添加到锚点
【发布时间】：2021-11-18 05:42:36
【问题描述】：

我创建了一个菜单栏并使用js动态创建了li和anchor。现在我可以将 href 和 text usng JavaScript 添加到每个创建的列表中：
<li><a></li></a> <li><a></li></a>.. 因此，当单击任何列表项时，它会移动到页面上的链接部分。

【问题讨论】：

是的，这是可能的。但是要尝试一下，如果您能与我们分享您的尝试（您的代码 sn-p），那就太好了？
例如：li.setAttribute('href'," ") li.innerText = " ";但链接到 li 可能无法与 img 一起使用
嗨@bcodeu！欢迎来到 SO！如果您可以包含您的 javascript 和 HTML 文档，其他用户将能够帮助您排除故障并提供更有见地的答案。 :)
您好，谢谢，我从下面找到了答案。我的下一次参与我将尝试发布代码 sn-p :)
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript list href

【解决方案1】：

选择并遍历您的li>as 并设置他们的href 和您想要的任何其他属性。如下所示

const links = [{
  title: 'Google',
  link: 'google.com'
}, {
  title: 'Yahoo',
  link: 'yahoo.com'
}, ];

document.querySelectorAll('li>a').forEach((itm, index) => {
  if (index >= links.length) return;
  itm.href = links[index].link;
  itm.text = links[index].title
})

<ul>
  <li>
    <a />
  </li>
  <li>
    <a />
  </li>
</ul>

或者您可以根据您的链接数组动态添加lis。

const links = [{
  title: 'Google',
  link: 'google.com'
}, {
  title: 'Yahoo',
  link: 'yahoo.com'
}, ];

let ul = document.getElementById('nav');

links.forEach(itm => {
  let li = document.createElement("li");
  let link = document.createElement("a");
  link.href = itm.link;
  link.text = itm.title
  li.appendChild(link)
  ul.appendChild(li)
})

&lt;ul id="nav"&gt;&lt;/ul&gt;

【讨论】：

【解决方案2】：

首先，您需要为每个项目指定一个唯一的 ID。然后使用他们的 id 作为参考并添加他们的 href 属性。

让我们考虑你的元素是

<li><a id='list1'>Stackoverflow</a></li>

而js代码会是

<script>
      document.getElementById("list1").href = "https://stackoverflow.com"; 
</script>

【讨论】：