Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <title>Javascript Create Div Element Dynamically</title>
        <style type="text/css">
            .ex {
                width:200px;
                position: relative;
                background-color :#CCC;
                height:150px;
                padding:10px;
                margin:5px;
                left-margin:0px;
                float :left;
            }
            #newdiv {
                width:800px;
                height:800px;
                border:1px solid #000;
            }
            .border {
                border:1px solid #000;
            }
        </style>
        <script>
            image.cc = 1;
​
            function changeimage(image) {
                if (image.cc == 0) {
                    image.cc = 1;
                    $(image).attr('src', 'images/white_contact.png');
                } else if (image.cc == 1) {
                    image.cc = 2;
                    $(image).attr('src', 'images/yellow_contact.png');
                } else if (image.cc == 2) {
                    image.cc = 3;
                    $(image).attr('src', 'images/green_contact.png');
                } else {
                    image.cc = 0;
                    $(image).attr('src', 'images/red_contact.png');
                }
            }
        </script>
        <script type="text/javascript" language="javascript">
            var i = 0;
​
            function createDiv() {
​
​
                if (i < 6) {
                    $('#newdiv').append('<div id="div' + i + '" class="ex" style="text-align: left;"><img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/></div>');
​
                    $('#newdiv').find('#div' + i).append('<table border="0"><tr>' +
                        '<td>Name:</td>' +
                        '<td><input type="text"></td>' +
                        '</tr><tr>' +
                        '<td>Title:</td>' +
                        '<td><input type="text"></td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td>Contact:</td>' +
                        '<td><input type="text"></td>' +
                        '</tr>' +
                        '</table>');
​
                }
​
                i++;
                $(".ex").draggable({
                        containment: 'parent',
                        cursor: 'pointer',
                        opacity: 0.6
                    });
                $(".ex").droppable();
​
            }
        </script>
    </head>
    
    <body>
        <p align="left"> <b>Click this button to create div element dynamically:</b>
​
            <input id="btn1" type="button" value="create div" onClick="createDiv();" />
            <div id="newdiv"></div>
        </p>
    </body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers