how to create forms dynamically in javascript

I have this div, where divBrdr should contain a form summaryConfig

 <div id="popup">
<div id="popupClose">
    <input type="image" alt="close window" src="images/close_btn.gif" width="20" height="20" onclick="" align="right">
</div>
<div id="divBrdr" >

</div>
</div>
<div id="backgroundPopup">
</div>

Right now i have this form inside divBrdr but then this popup appears differently for create and update so I wanted to make this form made dynamically. Can somebody help me do that?

<form style="padding-bottom:11px;" nam开发者_运维技巧e="summaryConfig" method="post" action="">
<img alt="title" src="images/update_conform_title.gif" width="189" hspace="4" height="17" vspace="4"><br>
&nbsp;<br>

<table align="center" width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>    <td width="800"></td>  </tr>
</table>

<div id="postUploadInfo">
</div>

<table align="center" border="0" cellpadding="10" cellspacing="0" width="84%">
    <tr>
        <td colspan="3" align="center">
            <label>
                <input  type="button"  tabindex="4" id="btnOk" value="Done" class="btn" onClick="">
            </label>
        </td>
    </tr>
</table>
</form>

if you want to add this form dynamically then you can hold your form in a variable and append that variable to divBrdr div on button click.

 VariableHoldingForm = "<form style='padding-bottom:11px;' name='summaryConfig' method='post' action=''> ";
   VariableHoldingForm +="<img alt='title' src='images/update_conform_title.gif' width='189' hspace='4' height='17' vspace='4'><br> &nbsp;<br> ... and till...</form>'
    $('#buttonId').click(function(){
        $('#divBrdr').append(VariableHoldingForm);
    });

even you can use document.createElement() to create any html tag

 **EDIT**

to unAppend remove html of your div like this..

$('#divBrdr').html('');

and then again add new form element variable on update button

$('#updateButton).click(function(){
            $('#divBrdr').append(newForm);
        });