无元素ID时使用JavaScript移动li位置并修改href的实现方法

完全可以在不依赖、不新增元素id属性的前提下完成需求，通过原生DOM的选择器API与节点操作方法即可实现，无需给页面追加任何id标识。

实现逻辑 #

• 通过目标无序列表现有的固定class组合定位到列表本身，不需要id支持
• 提取列表内的第一个<li>元素作为核心操作目标
• 在目标<li>的节点范围内查询内部的<a>标签，修改其href属性为指定值，避免误改其他链接
• 利用DOM节点的原生移动特性，将目标<li>插入到列表的第10个位置：对已存在于文档中的节点执行插入操作时，浏览器会自动将节点从原位置移动到新位置，不需要手动执行删除原节点的操作

完整实现代码 #

// 通过已有的class组合精准定位目标列表，无需id
const tagList = document.querySelector('ul.tags.tags--collection.inline-list');
// 增加边界判断，避免页面结构异常时抛出JS错误
if (tagList) {
  // 获取列表第一个li元素
  const targetLi = tagList.firstElementChild;
  if (targetLi) {
    // 修改li内部a标签的href属性
    const targetLink = targetLi.querySelector('a');
    if (targetLink) {
      targetLink.setAttribute('href', 'collections/all/cotton');
    }
    // 定位插入参考节点：要放到第10位（1-based计数），取初始列表中索引为10的li作为参考节点
    const listItems = tagList.querySelectorAll('li');
    const referenceLi = listItems[10];
    if (referenceLi) {
      tagList.insertBefore(targetLi, referenceLi);
    }
  }
}

实现说明 #

• 选择器ul.tags.tags--collection.inline-list可以精准匹配目标列表，该class组合为列表独有，不会误选页面其他元素
• 所有针对<a>标签的查询都限制在已经定位到的目标li范围内执行，不会误修改其他列表项的链接地址（比如第二个列表项中带前导斜杠的/collections/all链接完全不会被影响）
• 插入位置计算经过验证：执行插入后，前9个列表项为原列表的第2到第10项（accessories到leather），第10项为被移动的All链接，后续列表项顺序保持不变，完全符合位置要求
• 多层存在性判断可以兼容极端场景，哪怕页面列表长度不足、结构出现小变动也不会导致脚本报错阻断其他代码运行

内容的提问来源于stack exchange，提问作者Toufique E Joarder