Javascript 在节点列表中的元素之前和之后插入标记

我的分数如下：

<ul class="category-top-navigation__group--level-2">
    <li class="category-top-navigation__item--column-1">
    <li class="category-top-navigation__item--column-1">
    <li class="category-top-navigation__item--column-2">
    <li class="category-top-navigation__item--column-2">
</ul>

---

我曾考虑在结束后和开始前使用insertAdjacentHTML，但我不太确定如何使其工作，或者，如果这是完成任务的最佳方法。

所有category-top-navigation\uuu项——column-1是否都相邻？是否可以使用jQuery？是的，它们将始终相邻。我只能使用vanilla JS。这将是无效的HTML-您不能在此级别插入span，LI必须是列表的子级。

<ul class="category-top-navigation__group--level-2">
    <span class="new-element-1">
        <li class="category-top-navigation__item--column-1">
        <li class="category-top-navigation__item--column-1">
    </span>
    <span class="new-element-2">
        <li class="category-top-navigation__item--column-2">
        <li class="category-top-navigation__item--column-2">
    </span>
</ul>