创建DOM元素并追加的替代编写方法

Question

If I want to append a button with my pic to the document, I would 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 too long and hard to debug. But how can I create an img tag, then wrapping it with a button tag and div tag...

Please suggest any clear and simple method with jQuery's help.

UPDATE : story_pages is the jQuery UI dialog's id. I don't know if it affects or not.

UPDATE: I found the problem. I want the image shown above on the button instead of a button and a image.

The script you give me will result this:

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

The img tag has to be wrapped by button tag like:

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

So the image will attach on the button.

Answer 1

How about this:

var $button = $('<button>', {
  value: window_value,
  click: function() { reload_to_canvas(this.value); }
});

var $img = $('<img>', {
  id : 'w'+ window_value,
  src: '../pic/white_img.png'
})
.css({ height: '100px', width: '100px'});

$('#story_pages').append($('<div>').append($button, $img));

Answer 2

If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (ie, it starts with ). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements.

try this

  var div=$('<div>'); // creates new div element

  //updated here
  var img = $('<img />') .attr({   // create new img elementand adds the 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 to button
    click: function(){ reload_to_canvas(this.value)} //and the click event
  }).html(img);   /// and <-- here... pushed the created img to buttons html


 div.append(button); //append button ,img to div
 $('#story_pages').append(div);   //finally appends div to the selector

updated example fiddle

Answer 3

$('#story_pages').append(
    $('<div>').append(
        $('<button>', {
            value : window_value
        }).click(function() {
            reload_to_canvas(this.value);
        }).append(
            $('<img>', {
                id : 'w' + window_value,
                src : '../pic/white_img.png'
            }).width(110)
              .height(110)
        )
    )
);