How to create only a starting tag of an HTML element using JS or jQuery?

I have a fixed wp sub-menu list that looks something like this:

<ul class="sub-menu" style="display:flex">
   <li class="open1col"><a>Treatment Trials</a></li>
   <li class=""><a>Alzheimer’s</a></li>
   <li class="close1col open2col"><a href="">Asthma</a></li>
   <li class=""><a>COVID-19 Treatment</a></li>
   <li class="close2col"><a>COPD</a></li>
</ul>

I’d like to wrap the first 3 and the last 2 elements into 2 <div class="sub-menu-col"> elements so that they make two different columns side-by-sidy.

This content is not editable by the way, i can only add classes to li tags.

I have tried jQuery like this:

var open1col='<div class="sub-menu-col">';
var close1col='</div><div class="sub-menu-col">';
var close2col='</div>'; 

    $( ".sub-menu li:first-child" ).before(open1col);
        
        $( ".sub-menu li:nth-child(3)" ).before(close1col);
            
        $( "sub-menu li:last-child" ).after(close2col); 
    });

but it immediately closed the div after the openning and the 3 <li> items fell outside.

How can I add only the opening and the closing tags as html strings?