css styling not working properly on the div tag created on the fly

Question

I am working on the following code below which displays a grid and display more grids on click.

Right now, when a new grid is created, as seen in the running demo below, the new grid gets created but the problem is that it's right below the original grid. I want to have some space between the original grid and the newly created grid. Here's the JSFiddle for the below code for reference

The reason some columns are showing red is because I have the following style property set here in the code:

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

However, if I try to apply the following css

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

Nothing happens. I have a feeling that I am applying it at wrong place. Please let me know where exactly it should be applied.

 var source = { localdata: [ ["https://www.samplelink.com", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"], ["https://www.samplelink.com", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico DF", "Mexico"], ["https://www.samplelink.com", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico DF", "Mexico"], ["https://www.samplelink.com", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"], ["https://www.samplelink.com", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"], ["https://www.samplelink.com", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"], ["https://www.samplelink.com", "Frdrique Citeaux", "Marketing Manager", "24, place Klber", "Strasbourg", "France"], ["https://www.samplelink.com", "Martn Sommer", "Owner", "C\\/ Araquil, 67", "Madrid", "Spain"], ["https://www.samplelink.com", "Laurence Lebihan", "Owner", "12, rue des Bouchers", "Marseille", "France"], ["https://www.samplelink.com", "Elizabeth Lincoln", "Accounting Manager", "23 Tsawassen Blvd.", "Tsawassen", "Canada"], ["https://www.samplelink.com", "Victoria Ashworth", "Sales Representative", "Fauntleroy Circus", "London", "UK"], ["https://www.samplelink.com", "Patricio Simpson", "Sales Agent", "Cerrito 333", "Buenos Aires", "Argentina"], ["https://www.samplelink.com", "Francisco Chang", "Marketing Manager", "Sierras de Granada 9993", "Mxico DF", "Mexico"], ["https://www.samplelink.com", "Yang Wang", "Owner", "Hauptstr. 29", "Bern", "Switzerland"], ["https://www.samplelink.com", "Pedro Afonso", "Sales Associate", "Av. dos Lusadas, 23", "Sao Paulo", "Brazil"], ["https://www.samplelink.com", "Elizabeth Brown", "Sales Representative", "Berkeley Gardens 12 Brewery", "London", "UK"], ["https://www.samplelink.com", "Sven Ottlieb", "Order Administrator", "Walserweg 21", "Aachen", "Germany"], ["https://www.samplelink.com", "Janine Labrune", "Owner", "67, rue des Cinquante Otages", "Nantes", "France"], ["https://www.samplelink.com", "Ann Devon", "Sales Agent", "35 King George", "London", "UK"], ["https://www.samplelink.com", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"] ], datafields: [ { 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' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); var cellsrenderer = function (row, column, value) { return `<div style="color: blue">${value}</div>`; }; $("#grid").jqxGrid( { width: 800, source: dataAdapter, columnsresize: true, sortable: true, columns: [ { text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer }, { text: 'Contact Name', datafield: 'ContactName', width: 150 }, { text: 'Contact Title', datafield: 'Title', width: 100 }, { text: 'Address', datafield: 'Address', width: 100 }, { text: 'City', datafield: 'City', width: 100 }, { text: 'Country', datafield: 'Country' } ] }); var id = 1; $("#grid").on("rowselect", function (e) { $("<div />") .append($("<div />", { id: "grid" + id ,style:"color: red" })) .append($("<div />", { id: "button" + id })) .appendTo(document.body); $("#grid" + id).jqxGrid({ source: dataAdapter, columns: [ { text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer }, { text: 'Contact Name', datafield: 'ContactName', width: 150 }, { text: 'Contact Title', datafield: 'Title', width: 100 }, { text: 'Address', datafield: 'Address', width: 100 }, { text: 'City', datafield: 'City', width: 100 }, { text: 'Country', datafield: 'Country' } ] }); $("#grid" + id).on('rowselect', function () { $("<div />") .append($("<div />", { id: "grid" + id })) .append($("<div />", { id: "button" + id })) .appendTo(document.body); $("#grid" + id).jqxGrid({ source: dataAdapter, columns: [ { text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer }, { text: 'Contact Name', datafield: 'ContactName', width: 150 }, { text: 'Contact Title', datafield: 'Title', width: 100 }, { text: 'Address', datafield: 'Address', width: 100 }, { text: 'City', datafield: 'City', width: 100 }, { text: 'Country', datafield: 'Country' } ] }); $("#grid" + id).on('rowselect', function () { }); $("#button" + id).jqxButton({ value: 'Export Grid ' + id }); let currentId = id; $("#button" + currentId).on('click', function () { //console.log('clickin ', currentId) $("#grid" + currentId).jqxGrid('exportdata', 'pdf', 'jqxGrid' + currentId); }); id++; }); $("#button" + id).jqxButton({ value: 'Export Grid ' + id }); let currentId = id; $("#button" + currentId).on('click', function () { //console.log('click ', currentId) $("#grid" + currentId).jqxGrid('exportdata', 'pdf', 'jqxGrid' + currentId); }); id++; });

 <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/> <div id="grid"> </div>

Answer 1

Same way you are using a property before the value in style here :

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

You need to apply a property before values here :

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

Something like :

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

Answer 2

You need to add margin or padding in the style attribute

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

The way you specified style will get compiled wrong with CSS. Update the same with following code snippet.

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

Based on your preference you can even add margin instead of padding.