如何在 javascript 中動態創建 forms

Question

我有這個 div，其中divBrdr應該包含一個表單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>

現在我在divBrdr中有這個表單，但是這個popup在create和update時看起來不同，所以我想讓這個表單動態制作。 有人可以幫我這樣做嗎？

<form style="padding-bottom:11px;" name="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>

Answer 1

如果要動態添加此表單，則you can hold your form in a variable中，然后在單擊按鈕時將該變量保存到divBrdr div 中。

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

即使您可以使用document.createElement()創建任何 html 標簽

 **EDIT**

像這樣取消附加刪除您的 div 的 html ..

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

然后再次在更新按鈕上添加新的表單元素變量

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