jQuery把div放在隐藏上，用class和css把它放在它周围

Question

我正在尝试将一个现有div隐藏起来，然后在那个附加我自己的div并在jQuery中添加自定义css。它必须都在脚本中，因为脚本在任何其他css之前加载。

这是我到目前为止所得到的。

var div  = inputElement.parent();

div.css("visibility", "hidden");

/* How do I append a <div> with class filterStylingBasic, with the given css */ 
div.append("<div>");

div.attr('class', 'myclass_'+colorInfo.name);
div.css("background-color", colorInfo.colorCode);

div.addClass('filterStylingBasic');

div.css("width", "20px");
div.css("height", "20px");
div.css("display", "inline-block");
div.css("marginLeft", "5px");
div.css("marginBottom", "5px");
div.css("pointerEvents", "auto");
div.css("cursor", "pointer");

Answer 1

两种简单的方式：

1

var div2 = $('<div class="filterStylingBasic">');
div.append(div2);

2

var div2 = $('<div>');
div2.addClass('filterStylingBasic');
div.append(div2);

Answer 2

根据您现有的代码，您正在操纵现有CSS元素的div属性。

您需要创建DIV元素，然后将新创建的元素追加到现有div

var newDiv = $("<div></div>", {
    'class': 'myclass_'+colorInfo.name
})
.css({
    "background-color" : colorInfo.colorCode,
    "width" : "20px", //Rest of the properties
})
.addClass('filterStylingBasic');

//Append to div
div.append(newDiv);