⇠ chan.dev/ lessons/ epicreact

Create a User Interface with Vanilla JavaScript and DOM

We’re starting this adventure with a blank HTML file. So you know that I’ve got tricks up my sleave.

  • Add a <body>,
    • and inside, a div with an id of root
  • Then add a script,
    • with type="module"

That’s all the markup that we need. Let’s jump into the script.

  • Get a reference to the div#root with document.getElementById('root')
    • and assign it to a variable (rootElement)
  • To the rootElement, append a new element
    • We don’t have one. So let’s create one.
  • Create a new div with document.createElement('div')
    • and assign it to a variable (element)
    • Finally, define the textContent of element to be Hello, JavaScript!
    • …and as an extra, define the className “greeting”.

That’s all for the script. Let’s see what that did in the browser.

  • In our browser, we see the text “Hello, JavaScript!“.
  • When we open the concsole
    • our div#root,
    • our script,
    • and when we zoom into root,
      • the div we created,
        • with textContent and className defined

We now have:

  • A JavaScript module
  • That creates a DOM element (that defines a few properties)
  • And appends it to the DOM (that we created with HTML)
<body>
  <div id="root"></div>
  <script type="module">
    const rootElement = document.getElementById('root')
    const element = document.createElement('div')
    element.textContent = 'Hello JavaScript'
    element.className = 'greeting'
    rootElement.appendChild(element)
  </script>
</body>