javascript - Replacing DIVs with List Items inside form -

i'm trying format , change structure of standard html form. @ moment output looks this

    <form accept-charset="utf-8"  autocomplete="off" method="post">             <ol class="questions">                 <div>                      <label>first name *</label>                      <input type="text" />                 </div>                 <div>                      <label>email *</label>                      <input type="text" />                 </div>                 <div class="submit">                       <input type="submit" value="submit" />                 </div>             </ol>       </div>     </form> 

i need change divs list items , add span around labels if possible.

i've got far it's not altering unfortunately.

  window.onload = function() {             var widgethtml = $('ol.questions').html();         widgethtml = widgethtml             .replace(/<div>/g, '<li>')             .replace(/<\/div>/g, '</li>');     $('ol.questions').html(widgethtml);   }; 

any ideas add span , replace divs lis great

use .replacewith() , .wrap():

$("form div").replacewith(function(){     $(this).find('label').wrap('<span/>');     return $('<li>' + this.innerhtml + '</li>') }); 

jsfiddle example

this give you:

<form accept-charset="utf-8" autocomplete="off" method="post">     <ol class="questions">         <li>             <span><label>first name *</label></span>             <input type="text">         </li>         <li>             <span><label>email *</label></span>             <input type="text">         </li>         <li>             <input type="submit" value="submit">         </li>     </ol> </form>