Question

如果我想将带有我的图片的按钮附加到文档中，我会写：

$('#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>');

它太长而且难以调试。但是我如何创建一个img标签，然后用一个按钮标签和div标签包装它......

请使用jQuery的帮助建议任何简单明了的方法。

更新： story_pages是jQuery UI对话框的id。我不知道它是否有影响。

更新我发现了这个问题。我想要按钮上方显示的图像而不是按钮和图像。

你给我的剧本会产生这样的结果：

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

img标签必须用按钮标签包裹，如：

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

因此图片会附加按钮。

Answer 1

这个怎么样：

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

如果将一个字符串作为参数传递给$（），jQuery将检查该字符串以查看它是否看起来像HTML（即，它始于）。如果不是，则将字符串解释为选择器表达式，如上所述。但是如果字符串看起来像是一个HTML片段，那么jQuery会尝试按照HTML的描述创建新的DOM元素。然后创建并返回一个引用这些元素的jQuery对象。

试试这个

  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)
        )
    )
);

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

3 个答案: