In this article we will explore how to create HTML element using jquery.

Place below HTML in the form tag of the aspx page.

<div>
      <div id="divImage1" style="height: 220px; width: 220px;">
      </div>
      <div id="divImage2" style="height: 220px; width: 220px;">
      </div>
</div>
 

Method 1: In the below way of creating HTML element css  has been put with the image element. One can attach event while creating the element.

$("<img></img>", {
      src: "Kizashi/2010_suzuki_kizashi_33_2_cd_gallery.jpg",
      width: "200px",
      height: "200px",
      click: function() {
            alert('you clicked image.');
      }
}).css({
      border: '1px solid black',
      padding: '12px 12px 12px 12px'
}).appendTo('#divImage2');

Method 2: In the below way of creating HTML element imge style has been used to apply css style in the image element.

.imge
{
      position: absolute;
      top: 10px;
      left: 10px;
}

$("<img></img>", {
      "class": "imge",
      src: "Kizashi/2010_suzuki_kizashi_33_2_cd_gallery.jpg",
      width: "200px",
      height: "200px",
      click: function() {
            alert('you clicked image.');
      }
}).appendTo('#divImage1');