On page load, create X number of divs

Question

I have a weird idea where I want to ping number of records in a database with PHP, store number of records as $x , then create $x number of divs on a page.

I can currently return number of records with this code, so getting number of records is the easy part:

$getAllRecords = $test->getAllCats();//normal query db records return all method
$howManyCats = count($getAllRecords);//how many total cats?

What is best method to go about this? Would this all be within jQuery? Can I handle this just in PHP? What are you thoughts, and any suggestions if you have done this or something similar to this before?

Answer 1

You can use a for loop to insert the correct number of rows and then use echo to add the divs to the page.

$getAllRecords = $test->getAllCats();//normal query db records return all method
$howManyCats = count($getAllRecords);//how many total cats?

for ($i = 1; $i <= howManyCats ; $i++) {
    echo '<div/>'
}

Answer 2

jQuery:

 // var num = <?=$howManyCats?>; var num = 10; $(function() { var html = []; for (var i = 0; i < num; i++) { html.push('<div id="cat' + i + '">' + i + '</div>'); } $("#container").append(html.join('')); // append all in one go }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="container"></div>