So I have a pagination with numbers, like in the photo below:

And I need to add three dots after "1" like after "5" when I click on 5 or 10, like in the photo below:

I tried to do it with insertAdjacentElement like in a function below:

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 code:

<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>

But for some reason when I click on 5 or 10 nothing happens, and there's an error:

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

So I'm wondering if I have to declare "dots" in some other way or maybe the problem is in something else