Can I simply append element to already appended element? Row exists in google chrome tools, but there are no child elements. Obviously, if case alerts "No".
var row_index = 0;
for (let row of object_data){
$("#data-screen").append(`<div style='width:100%' class='row' id='row_${row_index}'></div>`)
row_index += 1;
for (let elem of row){
if ($(`#row_${row_index}`).length > 0){
alert("yes")
}
else {alert("no")}
$(`#row_${row_index}`).append(`<div style='border-bottom:1px solid black;' class='col-md-${column_counter}'>${elem}</div>`)
}
}
Dataset:
['3240', 'Job for Python', 'Jobs', 'Mon, 30 May 2022 14:41:37 GMT']
['3241', 'OratorClub & VmesteRosta', 'Club', 'Mon, 30 May 2022 14:41:37 GMT']
['3242', 'DriverClub', 'Drivers', 'Mon, 30 May 2022 14:41:37 GMT']
Jsfiddle: Fiddle
When you use append, you need to wrap in $(...) too. :)
let object_data = [
['3240', 'Job for Python', 'Jobs', 'Mon, 30 May 2022 14:41:37 GMT'],
['3241', 'OratorClub & VmesteRosta', 'Club', 'Mon, 30 May 2022 14:41:37 GMT'],
['3242', 'DriverClub', 'Drivers', 'Mon, 30 May 2022 14:41:37 GMT']
]
let column_counter = 4;
function getInfo() {
let row_index = 0;
for (let row of object_data) {
let el = $(`<div style="width:100%" class="row" id="row_${row_index}"/>`);
el.appendTo($('#data-screen'));
row_index += 1;
for (let elem of row) {
$(`<div style="border-bottom:1px solid black;" class="test col-md-${column_counter}">${elem}</div>`).appendTo(el);
}
}
}
getInfo()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<div style="height:95vh" id="data-screen">
</div>
</body>
</html>Consider the following.
$(function() {
var object_data = [
['3240', 'Job for Python', 'Jobs', 'Mon, 30 May 2022 14:41:37 GMT'],
['3241', 'OratorClub & VmesteRosta', 'Club', 'Mon, 30 May 2022 14:41:37 GMT'],
['3242', 'DriverClub', 'Drivers', 'Mon, 30 May 2022 14:41:37 GMT']
];
$.each(object_data, function(i, row) {
// Create the Row
$("<div>", {
class: "row",
id: "row_" + i
}).appendTo("#data-screen");
// Create the Cells, append to Row
$.each(row, function(j, cell) {
$("<div>", {
class: "col col-md-" + row.length + " bottom-border",
}).html(cell).appendTo("#row_" + i);
});
});
});.bottom-border {
border-bottom: 1px solid black;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:95vh" id="data-screen">
</div>This uses $.each() to iterate over the data and create the Rows and Cells. I had to make some guesses on what you might be trying to accomplish.
See more: https://api.jquery.com/jquery.each/
In the first loop, I use i as the Index and row as the Array element (from an Array of Arrays). In the second loop, I use j as the Index, and cell as the value of the element in the Array.
As the loop iterates each element, I create a DIV Element with a unique ID, to represent the Row. I then perform a second loop inside the first to create the Cells as DIV elements, which are appended to the DIV.