Javascript css样式在动态创建的div标记上无法正常工作

我正在编写下面的代码，该代码显示一个网格，并在单击时显示更多网格

现在，当一个新的网格被创建时，如下面正在运行的演示所示，新的网格被创建了，但问题是它就在原始网格的正下方。我希望在原始网格和新创建的网格之间有一些空间。下面是下面代码的示例，以供参考

某些列显示为红色的原因是我在代码中设置了以下style属性：

 $("<div />")
    .append($("<div />", { id: "grid" + id ,style:"color: red" }))

$（“”）
.append（$（“”，{id:“grid”+id，样式：“color:red”}））

但是，如果我尝试应用以下css

 $("<div />")
    .append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))

$（“”）
.append（$（“”，{id:“grid”+id，样式：“50px 10px 20px 30px”}））

什么也没发生。我觉得我用错地方了。请让我知道它应该应用在哪里

var源=
{
本地数据：[
["https://www.samplelink.com“，“Maria Anders”，“销售代表”，“奥贝街57号”，“柏林”，“德国”]，
["https://www.samplelink.com“，”安娜·特鲁希略“，”所有者“，”宪法修正案第2222号“，”墨西哥“，”，
["https://www.samplelink.com“，”安东尼奥·莫雷诺“，”业主“，”马塔德罗斯2312“，”墨西哥“，”墨西哥“，
["https://www.samplelink.com“，”托马斯·哈代“，”销售代表“，”汉诺威广场120号“，”伦敦“，”英国“]，
["https://www.samplelink.com“，”克里斯蒂娜·贝格隆德“，”订单管理员“，”贝古夫斯根8“，”卢尔“，”瑞典“，
["https://www.samplelink.com“，“汉娜·穆斯”，“销售代表”，“福斯特街57号”，“曼海姆”，“德国”]，
["https://www.samplelink.com“，”弗德里克城市“，”营销经理“，”24，克莱伯广场“，”斯特拉斯堡“，”法国“，
["https://www.samplelink.com“，“Martn Sommer”，“所有者”，“C\/阿拉基尔，67岁”，“马德里”，“西班牙”]，
["https://www.samplelink.com“，”劳伦斯·勒比汉“，”业主“，”布彻街12号“，”马赛“，”法国“]，
["https://www.samplelink.com“，“伊丽莎白·林肯”，“会计经理”，“Tsawassen大道23号”，“Tsawassen”，“加拿大”]，
["https://www.samplelink.com“，”维多利亚·阿什沃思“，”销售代表“，”冯特罗伊马戏团“，”伦敦“，”英国“]，
["https://www.samplelink.com“，“帕特里西奥·辛普森”，“销售代理”，“塞里托333”，“布宜诺斯艾利斯”，“阿根廷”]，
["https://www.samplelink.com“，”Francisco Chang“，”营销经理“，”Sierras de Granada 9993“，”墨西哥“，”，
["https://www.samplelink.com“，”杨旺“，”业主“，”豪普街29号“，”伯尔尼“，”瑞士“]，
["https://www.samplelink.com“，”佩德罗·阿丰索“，”销售助理“，”多斯卢萨达斯大街，23号“，”圣保罗“，”巴西“，
["https://www.samplelink.com“，”伊丽莎白·布朗“，”销售代表“，”伯克利花园12号啤酒厂“，”伦敦“，”英国“]，
["https://www.samplelink.com“，”Sven Ottlieb“，”订单管理员“，”Walserweg 21“，”亚琛“，”德国“]，
["https://www.samplelink.com“，”Janine Labrune“，”业主“，”辛泉奥塔奇街67号“，”南特“，”法国“]，
["https://www.samplelink.com“，“安·德文”，“销售代理”，“35乔治国王”，“伦敦”，“英国”]，
["https://www.samplelink.com“，”罗兰·孟德尔“，”销售经理“，”科奇加斯6“，”格拉茨“，”奥地利“]
],
数据字段：[
{name:'link'，type:'string'，map:'0'}，
{name:'ContactName'，type:'string'，map:'1'}，
{name:'Title'，type:'string'，map:'2'}，
{name:'Address'，type:'string'，map:'3'}，
{name:'City'，type:'string'，map:'4'}，
{name:'Country'，type:'string'，map:'5'}
],
数据类型：“数组”
};
var dataAdapter=new$.jqx.dataAdapter（源）；
var cellsrenderer=函数（行、列、值）{
返回`${value}`；
};
$（“#网格”）.jqxGrid(
{
宽度：800，
来源：dataAdapter，
列大小：对，
可排序：是的，
栏目：[
{文本：'Link'，数据字段：'Link'，宽度：200，cellsrender:cellsrender}，
{文本：“联系人姓名”，数据字段：“联系人姓名”，宽度：150}，
{文本：“联系人标题”，数据字段：“标题”，宽度：100}，
{文本：“地址”，数据字段：“地址”，宽度：100}，
{文本：“城市”，数据字段：“城市”，宽度：100}，
{文本：'Country'，数据字段：'Country'}
]
});
var-id=1；
$（“#网格”）。关于（“行选择”，函数（e）{
$("")
.append（$（“”，{id:“grid”+id，样式：“color:red”}））
.append（$（“”，{id:“按钮”+id}））
.附录（文件正文）；
$（“#网格”+id）.jqxGrid({
来源：dataAdapter，列：[
{文本：'Link'，数据字段：'Link'，宽度：200，cellsrender:cellsrender}，
{文本：“联系人姓名”，数据字段：“联系人姓名”，宽度：150}，
{文本：“联系人标题”，数据字段：“标题”，宽度：100}，
{文本：“地址”，数据字段：“地址”，宽度：100}，
{文本：“城市”，数据字段：“城市”，宽度：100}，
 $("<div />")
    .append($("<div />", { id: "grid" + id ,style:"color: red" }))

 $("<div />")
    .append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))

 $("<div />")
    .append($("<div />", { id: "grid" + id ,style:"padding: 50px 10px 20px 30px" }))

$("<div />")
.append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))

$("<div />")
.append($("<div />", { id: "grid" + id ,style:"padding:50px 10px 20px 30px" }))