使用 JavaScript 将 href 添加到锚点

Question

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

Answer 1

Select 并遍历您的 li>a 并设置它们的 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)
})

<ul id="nav"></ul>

Answer 2

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

让我们考虑一下你的元素是

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

而js代码会是

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

使用 JavaScript 将 href 添加到锚点

Adding href to anchor using JavaScript

javascript

list

href