JavaScript如何在指定HTML元素后插入内容？分页省略号插入报错求解

我有一个带数字的分页组件，如下图所示：

我需要在点击数字5或10时，在数字“1”后面追加和数字“5”后面一样的省略号（三个点），效果如下图：

我尝试使用insertAdjacentElement方法实现，代码如下：

ulTag.addEventListener('click', (e) =>{
        myFunction(e);
    })
    function myFunction(e) {
        let elems = document.querySelector('.active');
        if (elems !== null) {
          elems.classList.remove('active');
        }
         e.target.classList.toggle('active');       
         pageCall(e.target.innerText);
         let dots = document.getElementsByClassName('dots');
        let numb1 = document.getElementById('numb1');
        if (parseInt(e.target.innerText) >= 5) {
            numb1.insertAdjacentElement('afterend', dots);
  }
      }
} 

HTML代码如下：

<ul id="pag">
                <li class="btn prev" id="prev"><span><i class="fas fa-angle-left">Prev</i></span></li>
                <li class="numb active" id="numb1"><span>1</span></li>
                <li class="numb"><span>2</span></li>
                <li class="numb"><span>3</span></li>
                <li class="numb"><span>4</span></li>
                <li class="numb"><span>5</span></li>
                <li class="dots"><span>...</span></li>
                <li class="numb"><span>10</span></li>
                <li class="btn next" id="next"><span>Next<i class="fas fa-angle-right"></i></span></li>
            </ul>

但实际运行时点击5或10没有任何效果，控制台抛出如下错误：

Uncaught TypeError: Element.insertAdjacentElement: Argument 2 does not implement interface Element.

请问是dots变量的声明方式存在问题，还是有其他原因导致该错误？我该如何修复？

核心报错原因 #

document.getElementsByClassName 返回的是HTMLCollection类数组集合，不是单个DOM元素，而insertAdjacentElement第二个参数要求传入单个Element对象，类型不匹配就会触发这个报错。

其他潜在问题 #

1. JS代码末尾多了一个多余的闭合大括号，会触发语法错误
2. 如果直接移动原有的dots元素到1后面，原来5后面的dots就会消失，不符合同时显示两个省略号的需求
3. 没有处理点击页码小于5时，移除1后面多余dots的逻辑

如果需要1和5后面同时显示省略号，推荐新建省略号元素的实现方式：

ulTag.addEventListener('click', (e) =>{
  myFunction(e);
})
function myFunction(e) {
  // 过滤非数字页码的点击
  if (!e.target.closest('.numb')) return;
  
  let elems = document.querySelector('.active');
  if (elems !== null) {
    elems.classList.remove('active');
  }
  e.target.classList.toggle('active');       
  pageCall(e.target.innerText);

  const numb1 = document.getElementById('numb1');
  const currentPage = parseInt(e.target.innerText);
  // 先移除已经存在的前省略号，避免重复插入
  const existFrontDots = document.querySelector('.front-dots');
  existFrontDots && existFrontDots.remove();

  if (currentPage >= 5) {
    // 新建一个省略号元素，不影响原有5后面的省略号
    const frontDots = document.createElement('li');
    frontDots.className = 'dots front-dots';
    frontDots.innerHTML = '<span>...</span>';
    numb1.insertAdjacentElement('afterend', frontDots);
  }
}

如果只是要把原有省略号移动到1后面，只需要修改dots的取值方式即可：

// 把原代码中获取dots的行替换为下方代码
let dots = document.getElementsByClassName('dots')[0];

内容的提问来源于stack exchange，提问作者Carl