Create a new HTML element

• Has this element been added to the DOM (to your HTML)?
• Try doing console.log(div)

let div = document.createElement('div'); //create element
div.classList.add('btn'); //add class to element

Add element to page:

Look at DevTools → Elements tab and ensure this was added

//add element to page - must be added to a parent
document.querySelector('.container').appendChild(div);

Add and remove classes:

//add and remove classes
div.classList.add('btn-click');
div.classList.remove('btn');

Change text:

Make sure you look at the webpage to see if this was added

div.innerText = 'dude whats up';
document.querySelector('h1').innerText = 'this is now an official header'

Change styling:

Alternatively, you can just change the class, and assign the styling in CSS

//select element to reference
let header = document.querySelector('h1');
//change one style at a time
header.style.color = 'red';
//if the style has a dash in it - you have to reference it using brackets
header.style["padding-top"] = "10px"; 

//i can also specify multiple styles at once. however if i do this, i will overwrite all the styles that were applied (no longer red)
header.style = 'font-family: monospace; font-size: 60px';