Create dynamic divs using javascript/jquery

Question

I would like to create dynamic divs using javascript or jquery and do not really know how to being.

<div id="clickable">
    <button class="start">Default</button>
    <button class="random">Randon</button>
    <button class="gradient">Gradient</button>
    <button class="trail">Trail</button>
    <button class="clear">Clear</button>
    <div id="start">Please click on one of the buttons to get started!</div>
</div>

<div class="wrapper">

</div>

I would like to add the x*x divs between the "wrapper" class. For example, when someone types 4, the output would be a 4x4 grid of divs. Thank you in advance!

Currently I have this, but nothing happens.

$(".start").click(function() {
    total = prompt("Please enter a number");
});

$(document).ready(function() {
    $(".start").click(function() {
        function begin(total) {
            for (var i = 0; i < total; i++) {
                var rows = document.createElement("div");
                    for (var i = 1; i < rows; i++) {
                        var columns = document.createElement("div");
                    }
            }
        }
    });    
});

Show what you have tried, but you can just put html code in the innerHTML property — James Black
– James Black, Commented May 7, 2014 at 1:42
Also, what's the goal of having a grid? Maybe a table would be a good choice for this depending on the type of content you're going to have on the grid. — Jaime Garcia
– Jaime Garcia, Commented May 7, 2014 at 1:44
As of right now in your javascript every time you click the element with the class start you're defining the function begin. not running anything. — Adam Merrifield
– Adam Merrifield, Commented May 7, 2014 at 1:54

Serendipity · Accepted Answer · 2014-05-07 03:06:54Z

1

I have updated a fiddle here to get you started.

The way to get dynamic divs created is to first do the following Get a handle to your container. In this case it will be $(".wrapper")

I don't know how you wanted the grid to be done, but I've done it by considering each row as one div (with 'n' rows), and each row containing 'n' column divs.

To create a div, you can use the handy $('<div>', {...}) notation. And as you go through the loop, do not forget to append to the container.

Keep the presentation in CSS (you can see that it has been done in the fiddle as well).

The code has been copied here for you to refer to.

$(".start").click(function () {
    total = prompt("Please enter a number");
    console.log("Total is", total);
    //Now call the grid creator.
    createGrid(total);
});

function createGrid(total) {
    //Get the wrapper handle.
    var $container = $(".wrapper");

    //Loop through each row.
    for (var rowIndex = 0; rowIndex < total; rowIndex++) {

        //Create the skeleton for the row.
        var rowId = "row-" + rowIndex; //Not needed.
        var $row = $("<div>", {
            "class": "row",
            "id": rowId
        });

        //Loop through each column
        for (var columnIndex = 0; columnIndex < total; columnIndex++) {

            //Create skeleton for the column. (Note: IDs have to be unique)
            var columnId = rowIndex + "-col-" + columnIndex; //Not needed.
            var $column = $("<div>", {
                "class": "column",
                "id": columnId
            });

            //Append to the row div.
            $row.append($column);

        }

        //Finally append this row to the container.
        $container.append($row);
    }
}

edited May 7, 2014 at 3:06

answered May 7, 2014 at 2:58

Serendipity

1,0371 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

itzmurd4 Over a year ago

Hey thank you so much, this helps out a lot. I was under the impression that you always needed a (document).ready function with jQuery. This definitely clears things up!

Serendipity Over a year ago

It is needed if your scripts appear before the markup. It is better to place scripts after the body tag, following which you do not need a document ready.

Collectives™ on Stack Overflow

Create dynamic divs using javascript/jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related