Click here to Skip to main content
15,939,853 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
hi friends
i created a whole div in that i have one parent and two child div by default. if i click the add div button means another div placed outside the whole div. but i need placed inside div horizontally. Please help me its very urgent.


XML
<div id="divContent" style="border: solid 3px gray; height: 500px; 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: 445px;">
                                &nbsp;
                            </div>
                        </div>
                    </div>



<input type="button" id="aBAddClnBtn" value="Add Column" onclick="" />


XML
<script type="text/javascript">

        $(document).ready(function() {

            $("#aBAddClnBtn").click(function() {
                var new_div = "<div  style='border: solid 1px gray; width: 15%; '><div style='border: solid 1px gray; height: 50px;'>&nbsp;</div> <div  style='border: solid 1px gray; height: 445px;'>&nbsp;</div></div>";
             $(new_div).css("float", "left", "margin", "10px").appendTo("#divContent");

                return false;
            });
        });
</script>
Posted

1 solution

I think you have missed below file..

<script src="http://code.jquery.com/jquery-1.4.2.js " type="text/javascript"></script>

Include this and then check...

If you don't have internet connected, download the file and place it in project folder and then link properly..

XML
<head>
    <title>Div adding</title>

    <script src="http://code.jquery.com/jquery-1.4.2.js " type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("#aBAddClnBtn").click(function() {
                var new_div = "<div  style='border: solid 1px gray; width: 15%; '><div style='border: solid 1px gray; height: 50px;'>&nbsp;</div> <div  style='border: solid 1px gray; height: 445px;'>&nbsp;</div></div>";
             $(new_div).css("float", "left", "margin", "10px").appendTo("#divContent");

                return false;
            });
        });
</script>
</head>
<body>
    <div id="divContent" style="border: solid 3px gray; height: 500px; width: 100%;">
        
       
    </div>
    <input type="button" id="aBAddClnBtn" value="Add Column" onclick="" />
</body>
</html>
 
Share this answer
 
Comments
keerthana.k 24-Jan-13 1:01am    
i also include the jquery links
vinodkumarnie 24-Jan-13 1:11am    
ok.. Isn't it working my code..? Here it is working fine...
keerthana.k 24-Jan-13 1:23am    
its works but dynamic div placed outside the whole div
vinodkumarnie 24-Jan-13 1:33am    
you put height in whole div.. so it went outside of it.. Remove that height from whole div and try..

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900