Dynamically add a div using jquery

Question

5.00/5 (1 vote)

See more:

Hi I have a large div and I want to add it when I click the button like this:

Main div with button:

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="JavaScript/jquery.sparkline.js"></script>
    <script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<body>
    <div id="divMain">
        <label id="lblTitle">Add Here ...</label>
    </div>
    <div>
    <input type="button" id="btnAddControl" value="Add Control"/>
    </div>   
    <script type="text/javascript">
        $("#btnAddControl").click(function () { $("#divMain").append("<br/><div id='New'>New</div>")});
    </script> 
</body>
</html>

And this is the div I want to be in the main div:

HTML

<div class="divTable">
    <div class="divRow">

        <div class="divCell">
            <input type="text" id="lable" value="something" readonly="readonly"/>
            <button id="help-icon" style="width:13px ; height:13px">help</button>
            <div id="pop-up" class="divCell">
                loading...Say what u want!
            </div>
        </div>

        <div class="divCellmine">
            <label for="amount1">min:</label>
            <input type="text" id="amount1" style="border:0; font-weight:bold;" />
        </div>
           <div class="divCellmine">
        <div id="slider-range" style="width: 142px; height: 1px"></div>
           </div>
        <div class="divCellmine">
            <label for="amount2">max:</label>
            <input type="text" id="amount2" style="border:0; font-weight:bold;" />
        </div>

    </div>
</div>

Posted 3-Jul-12 19:48pm

bahar_Agi

Add a Solution

Comments

Sandeep Mewara 4-Jul-12 2:19am

And the issue is?

namneet singh 8-Jun-22 3:24am

dfgdfg

Sibasisjena 13-Jul-12 9:24am

Hi bahar_Agi,
write the javascript coding in <head></head>.
It is better and the proper way.

vinodkumarnie 21-Mar-13 3:28am

Whats happening with your code..?

2 solutions

Add a Solution

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

Nathan Stiles · Answer 1 · 2012-07-03T20:15:00

You might want to give the .divTable an id.

You should include the .divTable in the DOM from the start

Set it's style to display:none;

On Click

JavaScript

var $dt = $(".divTable");
var $dm = $("#divMain");
$dm.append($dt);
$dt.show();
// or
$dt.css('display', 'block'); // or inline or whatever

Anil Singh 2010 · Answer 2 · 2014-06-25T20:29:00

Solution 3

It might help you
http://www.code-sample.com/2014/06/create-div-dynamically-using-jquery.html[^]

Posted 25-Jun-14 20:29pm

Anil Singh 2010

Comments

shyam ji 16-Aug-14 5:59am

Great example, Thanks

Dynamically add a div using jquery

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Dynamically add a div using jquery

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us