Динамически воссоздать HTML/jQuery Мобильная форма в jQuery

Question

Как я могу динамически воссоздать следующую форму jQuery Mobile в jQuery? Я в основном хочу попробовать и взять как можно меньше строк кода. Все, что Ive пробовало до сих пор, заканчивается примерно такой же длины. Любые предложения и советы приветствуются!

<div data-role="page" id="create-person-dialog"> 
     <div data-role="header" data-theme="c" > 
      <h1></h1> 
     </div> 
     <div data-role="content">       
       <form id="create-person-dialog"> 
       <fieldset data-role="fieldcontain"> 
        <textarea data-theme="b" type="input" id="editFirstName" placeholder="First Name"></textarea> 
       </fieldset> 
       <fieldset data-role="fieldcontain"> 
        <textarea type="input" id="editLastName" placeholder="Last Name *"></textarea> 
       </fieldset> 
       <fieldset data-role="fieldcontain"> 
         <select id="editSalutation" data-native-menu="false"> 
          <option> </option> 
          <option value="Mr.">Mr.</option> 
          <option value="Ms.">Ms.</option> 
          <option value="Mrs.">Mrs.</option> 
         </select> 
       </fieldset> 
        <button href="#" id="edit" data-theme="b" data-role="button">Save</button> 

        <div id="delete"> 
         <button data-icon="delete" data-iconpos="right" data-theme="a" type="button">Delete</button> 
        </div> 
      </form> 
     </div> 
    </div> 

Heres начало моей первой попытки, я просто создать пустой DIV и начать добавление ...

JQuery:

$('#create-contact-dialog').append("<div id='dataRole' data-role='content'></div>"); 
    $('#create-contact-dialog #dataRole').append("<form id='create-contact-dialog'></form>"); 
    $('#create-contact-dialog form').append("<fieldset data-role='fieldcontain'></fieldset>"); 
    $('#create-contact-dialog fieldset').append("<textarea data-theme='b' type='input' id='firstName' placeholder='First Name'></textarea>"); 

Answer 1

Просто решил взбить все это в регулярном jQuery и скрыть его в нижней части страницы.

Для тех, кто когда-либо нуждается в большой старый вид ...

jQuery('#create-contact-dialog') 
     .append("<div id='dataRole' data-role='content'></div>"); 
    jQuery('#create-contact-dialog #dataRole') 
     .append("<form id='create-contact-dialog'></form>"); 
    jQuery('#create-contact-dialog form') 
     .append("<fieldset id='fnFeild' data-role='fieldcontain'></fieldset>"); 
    jQuery('#create-contact-dialog #fnFeild') 
     .append("<textarea data-theme='b' type='input' class='reg' id='firstName' placeholder='First Name'></textarea>"); 
    jQuery('#create-contact-dialog form') 
     .append("<fieldset id='lnFeild' data-role='fieldcontain'></fieldset>"); 
    jQuery('#create-contact-dialog #lnFeild') 
     .append("<textarea data-theme='b' type='input' class='reg' id='lastName' placeholder='Last Name *'></textarea>"); 
    jQuery('#create-contact-dialog form') 
     .append("<fieldset id='sFeild' data-role='fieldcontain'></fieldset>"); 
    jQuery('#create-contact-dialog #sFeild') 
     .append("<select id='salutation' placeholder='Salutation'></select>");  
    jQuery('#create-contact-dialog form') 
     .append("<fieldset id='tFeild' data-role='fieldcontain'></fieldset>"); 
    jQuery('#create-contact-dialog #tFeild') 
     .append("<textarea data-theme='b' type='input' class='reg' id='title' placeholder='Title'></textarea>"); 
    jQuery('#create-contact-dialog form') 
     .append("<fieldset id='dFeild' data-role='fieldcontain'></fieldset>"); 
    jQuery('#create-contact-dialog #dFeild') 
     .append("<textarea data-theme='b' type='input' class='reg' id='department' placeholder='Department'></textarea>"); 
    jQuery('#create-contact-dialog form') 
     .append("<fieldset id='accFeild' data-role='fieldcontain'></fieldset>"); 
    jQuery('#create-contact-dialog #accFeild') 
     .append("<textarea data-theme='b' type='input' class='reg' id='account' placeholder='Account'></textarea>"); 
    jQuery('#create-contact-dialog form') 
     .append("<fieldset id='btnFeild' data-role='fieldcontain'></fieldset>"); 
    jQuery('#create-contact-dialog #btnFeild') 
     .append("<button href='#' data-theme='b' data-role='button' id='save'>Save</button>"); 

Я заселить выбрать с помощью функции Thats вызывается, когда диалоговое окно называется:

 function populateSel(){ 
     jQuery("#salutation") 
     .append('<option value=""></option>') 
     .append('<option value="Mr.">bar</option>') 
     .append('<option value="Ms."></option>') 
     .append('<option value="Mrs."></option>') 
     .append('<option value="Dr."></option>') 
     .append('<option value="Prof."></option>')   
    }