在NodeList中的元素之前和之后插入标记

Question

我得到了以下标记：

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

通过使用以下JavaScript选择器：

document.querySelectorAll('.category-top-navigation__group--level-2 .category-top-navigation__item--column-1');

我可以选择所有column-1或column-2元素的NodeList。现在，我想做的是用新元素（可能是跨度）用column-1和column-2包装元素，以便新标记看起来像这样。

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

我当时想在开始前后使用insertAdjacentHTML，但是我不太确定如何使之工作，或者这是否是完成任务的最佳方法。