Alternativa ao jQuery BEFORE/AFTER (está fechando tag sozinho)

Fala galera!

Tenho a seguinte estrutura HTML:

<nav>
 <ul>
 <li><a href="/institucional" title="Institucional">Institucional</a></li>
 <li><a href="/restaurantes" title="Restaurantes">Restaurantes</a></li>
 <li><a href="/produtos" title="Produtos">Produtos</a></li>
 <li><a href="/solucoes" title="Soluções">Soluções</a></li>
 <li><a href="/fique-por-dentro" title="Fique por dentro">Fique por dentro</a></li>
 <li><a href="/contatos" title="Contatos">Contatos</a></li>
 </ul>
</nav>

Preciso dividir esse menu em 2, porém sem alterar o HTML da pagina original. Pensei em Javascript ou CSS.

Como em CSS, ninguem respondeu meu tópico, acredito que Javascript seja a solução mais viável (se algum moderador ver isso, pode remover aquele tópico).

Bom, fiz a lógica abaixo:

function divideMenu(menu)
{
// * Cria as variáveis

 var numeroDivisao = $(menu).length/2;
 var contaItem = 0;

 // * Inicia a divisão do menu. Insere algo antes
 $(menu + ":first-child").before("<div>");

 // * Aqui entra o laço, para cada LI...
 for (i = 0; i < $(menu).length; i++)
 {
 // * Adiciona um ao contador
 contaItem++;

 // * Se o contador atual for igual ao numero da divisão
 if(contaItem == numeroDivisao)
 {
 // * Pode quebrar a div e criar outra
 $(menu + ":nth-child(" + contaItem + ")").after('</div><div>');
 }
 }

 // * Fecha aqui
 $(menu+":last-child").after("</div>");
}

Poréeeeem, o before/after estão fechando a tag automaticamente.

Ao imprimir, o resultado é este:

<nav>
	<ul>
 <div></div>
 <li><a href="/institucional" title="Institucional">Institucional</a></li>
 <li><a href="/restaurantes" title="Restaurantes">Restaurantes</a></li>
 <div></div>
 <li><a href="/produtos" title="Produtos">Produtos</a></li>
 <li><a href="/solucoes" title="Soluções">Soluções</a></li>
 <li><a href="/fique-por-dentro" title="Fique por dentro">Fique por dentro</a></li>
 <li><a href="/contatos" title="Contatos">Contatos</a></li>
 </ul>
</nav>

E o resultado que eu esperaria era este:

<nav>
 <ul>
 <div>
 <li><a href="/institucional" title="Institucional">Institucional</a></li>
 <li><a href="/restaurantes" title="Restaurantes">Restaurantes</a></li>
 <li><a href="/produtos" title="Produtos">Produtos</a></li>
 </div>
 <div>
 <li><a href="/solucoes" title="Soluções">Soluções</a></li>
 <li><a href="/fique-por-dentro" title="Fique por dentro">Fique por dentro</a></li>
 <li><a href="/contatos" title="Contatos">Contatos</a></li>
 </div>
 </ul>
</nav>

Qual seria a melhor alternativa a estes recursos para eu atingir o resultado esperado?