jquery - 在 jQuery 中动态重新创建 HTML/jQuery Mobile 表单

Question

如何在 jQuery 中动态重新创建以下 jQuery Mobile 表单？我基本上想尝试使用尽可能少的代码行。到目前为止，我尝试过的任何东西的长度都差不多。任何建议或意见，将不胜感激！

    <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>

这是我第一次尝试的开始，我只是创建一个空 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>");

我使用调用对话框时调用的函数填充选择：

        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>')        
     }