Question

I want to add images to my website dynamically. When a user clicks a button, an ajax call through jquery is made to server, a json file is returned containing image urls and ids. I want to render these images on my webpage, then change their style(display based on some condition) and then add click events to these images (a single event handler that will capture the id of the image raising the event).
Please help me.

Answer 1

You can create image element as follows.

var img=document.createElement("img");
img.onclick=function() { /* js code here*/ };
img.src="http://example.com/example.jpg";
img.style.display="block";
/* or give css class, image.className="picture" */

then append in somewhere in div named “imagecontainer” for example in
<div id="imagecontainer">

document.getElementById("imagecontainer").appendChild(img);

Then done 🙂

p.s. Don’t you have ajax code? This url will help you, just append this code in the sample code, then done. http://api.jquery.com/jQuery.getJSON/