How To Add An Image Inside A Dynamically Created Div?

I am creating a dynamic div inside my javascript with the following code: var div = $('

').html('This is demo');

Solution 1:

I tried this and its working fine for me.

var elem = document.createElement("img");
      elem.setAttribute("src", "http://img.zohostatic.com/discussions/v1/images/defaultPhoto.png");
      elem.setAttribute("height", "30");
      elem.setAttribute("width", "30");
      document.getElementById("maindiv").appendChild(elem);

Solution 2:

var div = $('<divid="a1"></div>');
div.html("<fontcolor=green>This is demo</font>");
div.prepend('<imgsrc="...">');

Solution 3:

This is how I would do it.

var div = $('<div/>',{id:"a1"});
$("<font/>",{color:"green"}).html("This is demo").appendTo(div);
div.prepend('<img/>',{src:"test.jpg"});

Solution 4:

var div = $('<divid="a1"></div>').html("<imgsrc='iphone.png' /><fontcolor=green>This is demo</font>");

$('#test').append(div);

Solution 5:

(Edited for the edit of the question)

You can simply add it to the html:

for(var I = 0; I < size; I++) {
    //alert("Title for zeroth manual is: "+result.manuals[I].title);var div = $('<div id="a'+ I + '"></div>').html('<img src="iphone.png" /><font color="green">This is demo..</font>'); 
    $('#data').append(div);
}

You need different ids for your divs (the id is now a1, a2, ...)