Question: I am following [this thread](https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript) which shows how to generate DOM elements dynamically.
Suppose I have this snippet that generate a series of buttons:

```
for(var i = 0; i < result.length;i++){
      var menuCatButton = document.createElement("button");
      menuCatButton.id = "menu-mgt-button-"+result[i];
      menuMgtCategoryButtons.appendChild(menuCatButton);
}

```

How do I apply this set of style to all of the newly created buttons?

```
.new-button {
  background-color: #4CAF50;
  border: 1px solid;
  color: white;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 20px;
  cursor: pointer;
  width: 120px;
  height:50px;
  white-space: normal;
}

.new-button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

```

Answer: 
You can add the class the element using `classList.add()`.

**Demo:**

```js
var result = [1,2];
var menuMgtCategoryButtons = document.getElementById('menuMgtCategoryButtons');
for(var i = 0; i < result.length;i++){
  var menuCatButton = document.createElement("button");
  menuCatButton.id = "menu-mgt-button-"+result[i];
  menuCatButton.textContent = "Button "+result[i]; // add the text to the button
  menuCatButton.classList.add('new-button'); // add the class to the button
  menuMgtCategoryButtons.appendChild(menuCatButton);
}
```

```css
.new-button {
  background-color: #4CAF50;
  border: 1px solid;
  color: white;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 20px;
  cursor: pointer;
  width: 120px;
  height:50px;
  white-space: normal;
}

.new-button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
```

```html
<div id="menuMgtCategoryButtons"></div>
```
Add this line

```
menuCatButton.className="new-button"

```