jQuery Append無法正常工作

Question

我正在使用jQuery動態生成某些表單，並在jQuery對話框中顯示它們。但我的html元素沒有正確創建。

我用下面的代碼：

function generateEmail(to, cc, subject) { 
     var newDiv = $(document.createElement('div')); 

     newDiv.append('<form id="'+subject+'" name="'+subject+'" method="POST" action="#">'); 
     newDiv.append('<table class="sendmail" cellpadding="0" cellspacing="0" width="100%">'); 
     newDiv.append('<tr>'); 
     newDiv.append('<th width="25%"><label for="to">To: </label></th>'); 
     newDiv.append('<th width="75%"><input type="text" id="to'+subject+'" name="to" class="text small sendmail" value="'+to+'" /></th>'); 
     newDiv.append('</tr>'); 
     newDiv.append('<tr>'); 
     newDiv.append('<th width="25%"><label for="cc">CC: </label></th>'); 
     newDiv.append('<th width="75%"><input type="text" id="cc'+subject+'" name="cc" class="input" value="'+cc+'" /></th>'); 
     newDiv.append('</tr>'); 
     newDiv.append('<tr>'); 
     newDiv.append('<th width="25%"><label for="subject">Subject: </label></th>'); 
     newDiv.append('<th width="75%"><input type="text" id="sj'+subject+'" name="subject" class="input" value="'+subject+'" /></th>'); 
     newDiv.append('</tr>'); 
     newDiv.append('<tr>'); 
     newDiv.append('<th width="25%"><label for="message">Message: </label></th>'); 
     newDiv.append('<th width="75%"></th>'); 
     newDiv.append('</tr>'); 
     newDiv.append('<tr>'); 
     newDiv.append('<th colspan="2"><textarea name="message">email body</textarea></th>'); 
     newDiv.append('</tr>');  
     newDiv.append('</table>'); 
     newDiv.append('</form>'); 

     $(newDiv).dialog({ 
      modal: true, 
      title: "Reply to "+subject, 
      height: 400, 
      width: 700, 
      buttons: [ 
       { 
        text: "Cancel", 
        click: function() { 
         $(this).dialog("close"); 
        }}, 
       { 
       text: "Send", 
       click: function() { 
        if($('#to'+subject).val() == ''){ 
         alert('empty'); 
        } 
        //$('#zFormer').submit(); 
       }} 
      ] 
     }); 
    } 

但我得到的結果是：

<div class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 289px;" id="ui-id-1"> 
    <form id="SDS19272N63023" name="SDS19272N63023" method="POST" action="#"></form> 
    <table class="sendmail" width="100%" cellpadding="0" cellspacing="0"></table> 
    <tr></tr><th width="25%"><label for="to">To: </label></th><th width="75%"><input id="toSDS19272N63023" name="to" class="text small sendmail" value="email@gmail.com" type="text"></th> 
    <tr></tr><th width="25%"><label for="cc">CC: </label></th><th width="75%"><input id="ccSDS19272N63023" name="cc" class="input" value="" type="text"></th> 
    <tr></tr><th width="25%"><label for="subject">Subject: </label></th><th width="75%"><input id="sjSDS19272N63023" name="subject" class="input" value="SDS19272N63023" type="text"></th> 
    <tr></tr><th width="25%"><label for="message">Message: </label></th><th width="75%"></th> 
    <tr></tr><th colspan="2"><textarea name="message">email body</textarea></th> 
</div> 

正如你所看到的，這些HTML元素不正確生成。我完全同意這一點。任何人有任何想法爲什麼？

我使用jQuery v1.10.2和jQuery UI - v1.10.4。

謝謝！

Answer 1

然後做一個HTML字符串HTML字符串傳遞給追加功能這樣

var newDiv = $(document.createElement('div')); 
var HtmlStr = '<form id="'+subject+'" name="'+subject+'" method="POST" action="#">'; 
HtmlStr += '<table class="sendmail" cellpadding="0" cellspacing="0" width="100%">'; 
HtmlStr += '<tr>'; 
HtmlStr += '<th width="25%"><label for="to">To: </label></th>'; 
HtmlStr += '<th width="75%"><input type="text" id="to'+subject+'" name="to" class="text small sendmail" value="'+to+'" /></th>'; 
HtmlStr += '</tr>'; 
HtmlStr += '<tr>'; 
HtmlStr += '<th width="25%"><label for="cc">CC: </label></th>'; 
HtmlStr += '<th width="75%"><input type="text" id="cc'+subject+'" name="cc" class="input" value="'+cc+'" /></th>'; 
HtmlStr += '</tr>'; 
HtmlStr += '<tr>'; 
HtmlStr += '<th width="25%"><label for="subject">Subject: </label></th>'; 
HtmlStr += '<th width="75%"><input type="text" id="sj'+subject+'" name="subject" class="input" value="'+subject+'" /></th>'; 
HtmlStr +='</tr>'; 
HtmlStr += '<tr>'; 
HtmlStr += '<th width="25%"><label for="message">Message: </label></th>'; 
HtmlStr +='<th width="75%"></th>'; 
HtmlStr += '</tr>'; 
HtmlStr += '<tr>'; 
HtmlStr += '<th colspan="2"><textarea name="message">email body</textarea></th>'; 
HtmlStr +='</tr></table> </form>'; 
newDiv.append(HtmlStr); 

示例JsFiddle

Answer 2

jQuery自動完成您與append（如何知道您將在後面附加結束標記）中輸入的任何不完整標記，因此您需要將它全部設置爲一行並執行一條append語句。如果不是這樣，追加的形式標記，獲取表單元素，然後追加元素融入這種形式（和重複這一過程，爲您的所有元素）

所以這樣的：

newDiv.append('<form id="'+subject+'" name="'+subject+'" method="POST" action="#"><table class="sendmail" cellpadding="0" cellspacing="0" width="100%"><tr><th width="25%"><label for="to">To: </label></th><th width="75%"><input type="text" id="to'+subject+'" name="to" class="text small sendmail" value="'+to+'" /></th></tr><tr><th width="25%"><label for="cc">CC: </label></th><th width="75%"><input type="text" id="cc'+subject+'" name="cc" class="input" value="'+cc+'" /></th></tr><tr><th width="25%"><label for="subject">Subject: </label></th><th width="75%"><input type="text" id="sj'+subject+'" name="subject" class="input" value="'+subject+'" /></th></tr><tr><th width="25%"><label for="message">Message: </label></th><th width="75%"></th></tr><tr><th colspan="2"><textarea name="message">email body</textarea></th></tr></table></form>'); 

或者這樣：

newDiv.append('<form id="' + subject+'" name="'+subject+'" method="POST" action="#"></form>'); 
newDiv.find('#'+subject).append('<table class="sendmail" cellpadding="0" cellspacing="0" width="100%"></table>'); 
newDiv.find('.sendmail').append(

//continue this proccess for all elements