Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Just remove the double quote between div and '+i+ change <code>"div"'+i+'"</code> to <code>"div'+i+'"</code></p> <p>Your final code </p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;title&gt;Javascript Create Div Element Dynamically&lt;/title&gt; &lt;style type="text/css"&gt; .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; } &lt;/style&gt; &lt;script&gt; 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'); } } &lt;/script&gt; &lt;script type="text/javascript" language="javascript"&gt; var i=0; function createDiv() { if(i &lt; 6) { $('#newdiv').append('&lt;div id="div'+i+'" class="ex" style="text-align: left;"&gt;&lt;img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/&gt;&lt;/div&gt;'); $('#newdiv').find('#div'+i).append('&lt;table border="0"&gt;&lt;tr&gt;'+ '&lt;td&gt;Name:&lt;/td&gt;'+ '&lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;'+ '&lt;/tr&gt;&lt;tr&gt;'+ '&lt;td&gt;Title:&lt;/td&gt;'+ '&lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;'+ '&lt;/tr&gt;'+ '&lt;tr&gt;'+ '&lt;td&gt;Contact:&lt;/td&gt;'+ '&lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;'+ '&lt;/tr&gt;'+ '&lt;/table&gt;'); } i++; $( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6}); $( ".ex" ).droppable(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p align="left"&gt; &lt;b&gt;Click this button to create div element dynamically:&lt;/b&gt; &lt;input id="btn1" type="button" value="create div" onClick="createDiv();" /&gt; &lt;div id = "newdiv"&gt; &lt;/div&gt; &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>PS.Using onClick or binding click function is the same thing.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload