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' })

我们可以通过将它们写在花括号中来添加元素的属性，如上面一行，但是我们如何添加样式属性下的背景图像，边距，填充等。还添加了内部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();
         }
    }
});

Answer 2

使用此 .css()

$('#div' + WidgetDetails.Name + 'QuickPanel').css({
    "background-image":"/path",
    "margin":"20px",
    "padding":"4px"
});

Answer 3

您也可以这样做：

<强> JS

$("<div/>",{
    id: "a",
    text:"sadsad",
    style:"background-color:red;height:50px;",
    class: "classA"
  }).appendTo("body");

fiddle

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

3 个答案: