Generating a series of DIV elements using the DOM and attaching them to the primary DIV

Question

Generating a series of DIV elements using the DOM and attaching them to the primary DIV

I am attempting to dynamically create 121 divs using the DOM and then add them to the .container div

const container= document.querySelector('.container');
        const divNumber= 121;
        for (let i= 0; i<= 121; i++){
            const divs= document.createElement('div');
            divs.classList.add('items');
            container.appendChild(divs);
        }

.container {
            display: grid;
            grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
        }
        .items {
            border: 1px solid black;
            margin: 0px;
        }

<div class='container'></div>

There doesn't appear to be any changes on the webpage. How can I generate a group of 11 by 11, totaling 121 divs with the use of the DOM and insert them into the parent div, which is .container in this instance?

javascript css

Answer 1

Answer №1

Implement the grid-gap property to ensure all grids are overlapping.

const container = document.querySelector('.container');
const divNumber = 121;
for (let i = 0; i < 121; i++) {
  const divs = document.createElement('div');
  divs.classList.add('items');
  divs.innerHTML = i + 1
  container.appendChild(divs);
}

.container {
  display: grid;
  grid-template-columns: repeat(11,1fr);
  grid-gap: 20px;
}

.items {
  border: 1px solid black;
  margin: 0px;
  padding: 5px;
  color: green;
}

<div class='container'></div>

Answer 2

Implement the grid-gap property to ensure all grids are overlapping.

const container = document.querySelector('.container');
const divNumber = 121;
for (let i = 0; i < 121; i++) {
  const divs = document.createElement('div');
  divs.classList.add('items');
  divs.innerHTML = i + 1
  container.appendChild(divs);
}

.container {
  display: grid;
  grid-template-columns: repeat(11,1fr);
  grid-gap: 20px;
}

.items {
  border: 1px solid black;
  margin: 0px;
  padding: 5px;
  color: green;
}

<div class='container'></div>

Generating a series of DIV elements using the DOM and attaching them to the primary DIV

Answer №1

Similar questions

Catalog of items in Mustache

Implementing JavaScript Functions to Trigger Control Key and Plus/Minus Events

Adding a Header Image to the Top of All Pages with CSS

Ways to showcase a div exclusively on UC mini browser

How can the @blur event be added to the vue-bootstrap-typeahead in Nuxt/Vue application?

Navigating between various arrays

Scroll through a particular HTML element using jQuery animation

A timer created using jQuery and JavaScript

Fill in according to the options selected in the dropdown menu

Creating Recursive Portals with three.js

Can you explain the reference point used in the `drawImage()` function on a canvas?

Are there any current implementations of the Media Capture API in use?

How can I modify the function inside the event listener in a React Functional Component?

Tips for accessing an Element by its Id in Vue

The Vuetify v-btn within the v-bottom-navigation remains in an active state even when it has not

What are some methods for applying border styles to the first and last row of a table using Material UI?

How to turn off double tap zoom feature in Safari on iOS devices

Storing audio files in Firebase Cloud Database and displaying them in React js + Dealing with an infinite loop problem

How to retrieve a value from PHP using Ajax?

What is the best way to remove text messages from a channel that only allows images?