创建DOM元素和追加的另一种编写方法

Alternative writing method to create DOM elements and append

本文关键字：另一种 方法 追加 DOM 元素 创建      更新时间：2023-09-26

如果我想在文档中添加一个带有我的图片的按钮，我会写:

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

所以图像将附加在按钮上

这个怎么样:

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

如果一个字符串作为参数传递给$()，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

更新示例fiddle 

$('#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)
        )
    )
);
相关文章：