使用javascript或jquery单击按钮时添加新div [英] add new div while click a button using javascript or jquery
本文介绍了使用javascript或jquery单击按钮时添加新div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨朋友
如何使用java脚本或jquery点击添加新按钮时添加新div。
默认我创建一个div如果我点击添加按钮然后一个div加入内容div。
请帮帮我。
感谢您的回复。
[来自OP的更新：]
Hi friends
how to add new div while click a add new button using java script or jquery.
default i created one div if i click the add button then one div add to content div.
please help help me.
thanks for your reply.
[Update from OP:]
<form id="form1" runat="server">
<div>
<table width="100%" cellspacing="5">
<tr>
<td style="width: 8%; height: 100%; vertical-align: top;">
<div id="divTools" style="width: 100%; background-color: gray;">
<div id="divctrltitle">
Form Toools
</div>
<div id="divctrl">
<ul>
<li id='label'><span>Label</span></li>
<li id='input type="text"'><span>TextBox</span></li>
<li id='select'><span>DropDownList</span></li>
<li id='textarea'><span>Textarea</span></li>
<li id='input type="button" value="Add"'><span>Add</span></li>
<li id='input type="button" value="Save"'><span>Save</span></li>
<li id='input type="button" value="update"'><span>Update</span></li>
</ul>
</div>
</div>
<table>
<tr>
<td>
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type="button" id="aBAddClnBtn" value="Add Column" onclick="" />
</td>
</tr>
</table>
</td>
<td style="width: 60%; height: 100%; vertical-align: top;">
<div id="divContent" style="border: solid 3px gray; height: 450px; width: 100%;">
<div id="divSubContent" style="border: solid 1px gray; width: 15%; height: 100%;">
<div id="divSubContent1" style="border: solid 1px gray; width: 100%; height: 50px;">
</div>
<div id="divSubContent2" style="border: solid 1px gray; width: 100%; height: 395px;">
</div>
</div>
</div>
</td>
<td id="tdPropertyWindow" style="width: 25%; height: 100%; vertical-align: top;">
<div id="lYPropertyWindow" style="width: 100%; background-color: Gray;">
<table>
<tr>
<td colspan="2" align="center">
<b>Properties</b>
</td>
</tr>
<tr>
<td>
<b>FieldName</b>
</td>
<td>
<select id="lBFieldName" name="lBFieldName" style="width: 125px;">
<option value="EmpId">EmpId</option>
<option value="EmployeeName">EmployeeName</option>
<option value="JobTitle">JobTitle</option>
<option value="Division">Division</option>
<option value="Location">Location</option>
<option value="HireDate">HireDate</option>
<option value="PerformanceResults">PerformanceResults</option>
<option value="PerformanceBehaviour">PerformanceBehaviour</option>
<option value="MeritIncrement">MeritIncrement</option>
<option value="Lumpsum">Division</option>
<option value="PromoJobTitle">PromoJobTitle</option>
<option value="PromoIncrement">PromoIncrement</option>
</select>
</td>
</tr>
<tr>
<td>
<b>DisplayName</b>
</td>
<td>
<input type="text" id="txtDispalyName" name="txtDisplayName" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>TableName</b>
</td>
<td>
<input type="text" id="txtTableName" name="txtTableName" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>Width</b>
</td>
<td>
<input type="text" id="txtWidth" name="txtWidth" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>Height</b>
</td>
<td>
<input type="text" id="txtHeight" name="txtHeight" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>Top</b>
</td>
<td>
<input type="text" id="txtTop" name="txtTop" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>Left</b>
</td>
<td>
<input type="text" id="txtLeft" name="txtLeft" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>ContainerId</b>
</td>
<td>
<input type="text" id="txtContainer" name="txtContainer" style="width: 120px" />
</td>
</tr>
<tr>
<td>
<b>Visibility</b>
</td>
<td>
<input type="text" id="txtVisible" name="txtVisible" value="True" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>PrimaryKey</b>
</td>
<td>
<select id="lBPrimaryKey" style="width: 125px;">
<option value="true">True</option>
<option value="false">False</option>
</select>
</td>
</tr>
<tr>
<td>
<b>Used</b>
</td>
<td>
<select id="lBUsed" style="width: 125px;">
<option value="true">True</option>
<option value="false">False</option>
</select>
</td>
</tr>
<tr>
<td>
<b>Editable</b>
</td>
<td>
<select id="lBEditable" style="width: 125px;">
<option value="true">True</option>
<option value="false">False</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<b>Data Type</b>
</td>
</tr>
<tr>
<td>
<b>Alpha/Num</b>
</td>
<td>
<input type="text" id="txtAlpha" name="txtAlpha" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>NumberType</b>
</td>
<td>
<input type="text" id="txtNumberType" name="txtNumberType" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>FieldType</b>
</td>
<td>
<input type="text" readonly="readonly" id="txtFieldType" name="txtFieldType" style="width: 120px;" />
</td>
</tr>
<tr>
<td>
<b>Precision</b>
</td>
<td>
<input type="text" id="txtPrecision" name="txtPrecision" style="width: 120px;" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</form>推荐答案
Try this code sample:
Try this code sample:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript">(function() {
(function() {
(\"#add\").click(function() {
div = document.createElement('div');
("#add").click(function() { div = document.createElement('div');
这篇关于使用javascript或jquery单击按钮时添加新div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
