Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript jQuery
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>
                               &nbsp;
                           </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;">
                               &nbsp;
                           </div>
                           <div id="divSubContent2" style="border: solid 1px gray; width: 100%; height: 395px;">
                               &nbsp;
                           </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>
Posted 22-Jan-13 22:39pm
Edited 22-Jan-13 23:40pm
v2
Comments
Zoltán Zörgő at 23-Jan-13 4:42am
   
I see your code but I don't know what you want exactly...
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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() {
      $("#add").click(function() {
          div = document.createElement('div');
          $(div).addClass("inner").html("new inner div");
          $("#container").append(div);
        });
    });
</script>
<style>
 #container {border: 1px solid red; padding: 10px; width: 100%;}
 .inner {border: 1px solid green; margin: 10px; width: auto; height: 20px;}
</style>
<body>
 <div id="container">
  <div class="inner">original inner div</div>
 </div>
 <button id="add">Add new div</button>
</body>
  Permalink  
Comments
keerthana.k at 23-Jan-13 4:05am
   
now i send my html code. after you will tell your idea. i am confused.
Zoltán Zörgő at 23-Jan-13 4:41am
   
Pleas don't add improvements to your question as solution. Use proper widgets.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

If you have a constraint for the position of div on the page, I would suggest adding them on to the page and hiding when not necessary.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 587
1 Sergey Alexandrovich Kryukov 519
2 Maciej Los 305
3 BillWoodruff 250
4 Mathew Soji 195
0 OriginalGriff 7,356
1 Sergey Alexandrovich Kryukov 6,777
2 DamithSL 5,461
3 Manas Bhardwaj 4,916
4 Maciej Los 4,475


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 23 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100