Transformar menu de um nível em dois com Javascript

Olá, Eu preciso criar um menu com dois níveis utilizando Javascript.

O código está assim:

<div id="menu">
    <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
    </ul>
</div>

	Eu preciso transformá-lo em um segundo nível e inserir texto no estilo "Parent 1" no primeiro nível, dessa maneira:

<div id="menu">
    <ul>
       <li>Parent 1
         <ul class="sub-menu">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
         </ul>
    </li>
    </ul>
</div>