Struggling to target specific elements in CSS that are dynamically generated through JavaScript

Question

Struggling to target specific elements in CSS that are dynamically generated through JavaScript

After using JavaScript to generate some divs, I ended up with the following code:

const container = document.querySelector('#container');
for(let i = 1; i < 17; i++) {
    var row = document.createElement('div');
    row.id = 'r' + i;
    row.class = 'row';
    container.appendChild(row);
    for(let j = 1; j < 17; j++) {
        var newDiv = document.createElement('div');
        newDiv.id = 'c' + j;
        newDiv.class = 'box';
        newDiv.textContent = row.id;
        row.appendChild(newDiv);
    }
}

Attempting to style the row divs by adding a green border using CSS:

#row {
    border: 1px solid green;

}

Why are the rows not displaying with a green border? Can CSS target elements created dynamically in JavaScript?

I expected 16 boxes for each of the 16 div elements with class "row".

javascript html css syntax

Answer 1

Answer №1

Instead of using class in JavaScript, make sure to use className.

element.className = 'element'

When writing CSS, remember to use . for classes instead of # for ids.

.element {
  background-color: purple;
}

Answer 2

Instead of using class in JavaScript, make sure to use className.

element.className = 'element'

When writing CSS, remember to use . for classes instead of # for ids.

.element {
  background-color: purple;
}

Answer 3

Answer №2

There are two issues at play here...

The first problem lies within the realm of CSS. In order to apply styles to a class in CSS, you need to use the . selector. So, to target the row class and give it styling, you should do the following:

.row{
    border: 1px solid green;
}

The second issue pertains to JavaScript.

JavaScript does not have a class property for DOM elements. Instead, it offers two other options for working with classes. The first is the className property, which is a string that you need to handle manually when making changes.

Here is how you would use it:

row.className = 'row'

The second option is the classList object, which provides useful methods like add, remove, and contains to easily manipulate classes in JavaScript.

In your case, you would do this:

row.classList.add('row')

To remove the class, you can simply use:

row.classList.remove('row')

And if you need to perform actions based on the presence of a class, you can check for it using:

if( row.classList.contains('row') ) {
    // Your code here
}

I hope this information proves helpful.

Answer 4

There are two issues at play here...

The first problem lies within the realm of CSS. In order to apply styles to a class in CSS, you need to use the . selector. So, to target the row class and give it styling, you should do the following:

.row{
    border: 1px solid green;
}

The second issue pertains to JavaScript.

JavaScript does not have a class property for DOM elements. Instead, it offers two other options for working with classes. The first is the className property, which is a string that you need to handle manually when making changes.

Here is how you would use it:

row.className = 'row'

The second option is the classList object, which provides useful methods like add, remove, and contains to easily manipulate classes in JavaScript.

In your case, you would do this:

row.classList.add('row')

To remove the class, you can simply use:

row.classList.remove('row')

And if you need to perform actions based on the presence of a class, you can check for it using:

if( row.classList.contains('row') ) {
    // Your code here
}

I hope this information proves helpful.

Struggling to target specific elements in CSS that are dynamically generated through JavaScript

Answer №1

Answer №2

Similar questions

AngularJS date and time picker featuring user-defined input validation

Integrating dual Google Maps onto a single HTML page

Looking for guidance on how to specify the angular direction in the ng-repeat

The sequencing of operations in Node.js streams

Is it possible to adjust the timezone settings on my GraphQL timestamp data?

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

Is there a way to distinguish mouseout/leave events based on the side in jQuery?

Updating database through AJAX calls does not work

Is there a way to access a child component's method from the parent component using ref in Vue3?

Error: An unexpected identifier was encountered while executing my function

Responsive issue identified with Bootstrap navbar hamburger menu upon clicking

Always make sure to call for files using their respective names in

Can we iterate through an array containing arrays of objects in a loop?

Managing spinners in Protractor when they are concealed by a wrapper element

Having trouble utilizing the DatePicker component in my react native application

Passing the title of a page as data to a component in Next.js

bootstrap3 container alignment

The CSS Menu is not displaying correctly on Internet Explorer 8

How can I use map functions to change the border color of specific items when clicked?

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text