jQuery Append Does Not Work Properly

Question

I'm using jQuery to generate some form dynamically and show them in a jQuery dialogue box. But my html elements are not created properly.

I use following code:

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();
                }}
            ]
        }); 
    }

But the results I get is:

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

As you can see, those HTML elements are not generated properly. I'm totally confused with this. Anybody has any idea why?

I'm using jQuery v1.10.2 and jQuery UI - v1.10.4.

Thanks!

Answer 1

Make a single HTML string then pass that HTML string to the append function like this

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

example on JsFiddle

Answer 2

jQuery auto completes any incomplete tags that you put in with append (how would it know that you are going to append the end tag later), so you need to make it all one line and do one append statement. Either that or append in a form tag, get that form element, then append elements into that form (and repeat that process for all your elements)

So this:

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

Or this:

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