Click here to Skip to main content
14,668,361 members
Rate this:
Please Sign up or sign in to 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 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:
<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
Comments
Sandeep Mewara 4-Jul-12 2:19am
   
And the issue is?
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..?

Rate this:
Please Sign up or sign in to vote.

Solution 1

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
var $dt = $(".divTable");
var $dm = $("#divMain");
$dm.append($dt);
$dt.show();
// or
$dt.css('display', 'block'); // or inline or whatever
   
Rate this:
Please Sign up or sign in to vote.

Solution 3

   
Comments
shyam ji 16-Aug-14 5:59am
   
Great example, Thanks

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




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