javascript - Alternative writing method to create DOM elements and append -

if want append button pic document, write:

$('#story_pages').append('<div><button value="'+window_value+'" onclick="reload_to_canvas(this.value)" > <img id= "w'+window_value+'", src="../pic/white_img.png", width="110px", height="110px"/> </button></div>'); 

it's long , hard debug. how can create img tag, wrapping button tag , div tag...

please suggest clear , simple method jquery's help.

update: story_pages jquery ui dialog's id. don't know if affects or not.

update: found problem. want image shown above on button instead of button , image.

the script give me result this:

<div> <button value="1"></button> <img ......./> </div> 

the img tag has wrapped button tag like:

<button>     <img.../> </button> 

so image attach on button.

if string passed parameter $(), jquery examines string see if looks html (i.e., starts ). if not, string interpreted selector expression, explained above. if string appears html snippet, jquery attempts create new dom elements described html. jquery object created , returned refers these elements.

try this

  var div=$('<div>'); // creates new div element    //updated here   var img = $('<img />') .attr({   // create new img elementand adds mentioned attr                    id:'w'+window_value ,                     src:"../pic/white_img.png",                    width:"110px",                     height:"110px"});    var button= $('<button/>',  //creates new button   {        value: window_value,  //add text button     click: function(){ reload_to_canvas(this.value)} //and click event   }).html(img);   /// , <-- here... pushed created img buttons html    div.append(button); //append button ,img div  $('#story_pages').append(div);   //finally appends div selector 

updated example fiddle