Test Prepend - Tutorials Point

by chayacooper

HTML

<a href="#">Click Here</a><br/>

    <input type=checkbox name="test" class="cbx" value="test" >
    <label id="cbx">Test</label>

   <p>Click on any square below to see the result:</p>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>

CSS

.div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }

      .div1{ 
             border:2px solid #666;
            vertical-align:baseline;
            margin-right:4px;
            margin-left:6px;
            width: 16px;
            height:16px;
            font-size:8px;            
            background-color:yellow;
           }

JavaScript

$(document).ready(function() {

     $("a").click(function () {
       $("div").prepend('<div class="div1"></div>' );
  $("#cbx").prepend('<div class="div1"></div>' );
    });

   });