<!-- you don't need to touch HTML in this exercise -->
/* it is not required to use CSS in this exercise */
/* BUT I DON'T LIKE FOLLOWING RULES... */

.foo {
  color: blue;
}
// This instruction will simply generate 
// a new DOM Element of type "p".
//
// It returns a reference to that element,
// at this point you can use the element's
// API as you did already so many times.
const p = document.createElement('p')

// Use the element's API:
p.innerHTML = 'Hello World'
p.classList.add('foo')

// Now we can use other APIs to fetch a
// reference to an existing DOM element.
//
// In this case is the BODY, but you
// can use any of the element matching
// APIs that you know already:
// - getElementById
// - querySelector
const target = document.body

// Finally, we keep using DOM element's
// API to append the new P into the
// desired element
target.appendChild(p)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.