js实现lihref

以下是实现通过JavaScript动态修改<li>元素中链接（href）的几种方法：

通过DOM选择器修改单个元素

// 通过ID获取li元素并修改其子链接的href
const listItem = document.getElementById('myListItem');
const link = listItem.querySelector('a');
link.href = 'https://new-url.com';

批量修改多个li中的链接

// 获取所有li元素并遍历修改
const listItems = document.querySelectorAll('ul li a');
listItems.forEach(link => {
  link.href = 'https://updated-url.com';
});

动态创建带有链接的li元素

// 创建新的li元素并添加链接
const newListItem = document.createElement('li');
const newLink = document.createElement('a');
newLink.href = 'https://dynamic-link.com';
newLink.textContent = 'New Link';
newListItem.appendChild(newLink);
document.querySelector('ul').appendChild(newListItem);

使用事件委托处理动态li的链接

// 为父元素添加事件监听器
document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'A') {
    e.preventDefault();
    window.location.href = e.target.href;
  }
});

注意事项

• 确保DOM加载完成后再执行脚本，可将代码放在DOMContentLoaded事件中
• 修改href时注意URL的格式正确性
• 对于动态添加的元素，考虑使用事件委托方式绑定事件

这些方法涵盖了从简单修改到动态创建的常见需求场景，可根据实际项目需求选择适合的实现方式。