使用jquery创建div元素并添加内部html

Question

我动态地制作一些 div 元素

var QuickPanelItem = $('<div/>', { 'id': 'div' + WidgetDetails.Name + 'QuickPanel', 'class': 'left_slidethumbs button_' + WidgetDetails.Name + '' });            
QuickPanelItem.append($('<div/>', { 'class': 'text_button' }));
$("#divLeftQuickPanel").append(QuickPanelItem);

我的疑问是

$('<div/>', { 'class': 'text_button' })

我们可以通过将元素的属性写在花括号中来添加元素的属性，如上行所示，但是我们如何添加属于 style 属性的背景图像、边距、填充等。还添加内部 html。

Answer 1

您可以以完全相同的方式执行此操作，因为 jQuery 支持创建新元素时传递的对象中的任何 jQuery 方法

$('<div />', { 
    'class': 'text_button',
    css    : {
          backgroundImage : 'url(image.png)',
          margin : '10px 20px 3px 5px'

    },
    html   : '<p>CONTENT</p>',
    on     : {
         click : function() {
            alert();
         }
    }
});