JavaScript Rendered Hello World

In this article, we are not going to use React at all. Instead, we are going to use JavaScript to create a div DOM element with the text content "Hello World".

Why we are doing this?
It's very important to have a basic understanding of how the DOM elements are created using JavaScript because it will help you to understand how React really works under the hood.

Exercise 1

<!DOCTYPE html>
<html>
  <head>
    <title>Excercise</title>
  </head>
  <body>
    <!-- create a 'div' element with an id 'root' -->

    <script>
      // create a 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set the textContent of div element to 'Hello World'
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

      // append the div element to root div using append method
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
    </script>
  </body>
</html>

Solution Code (Exercise 1)

Exercise 2

<!DOCTYPE html>
<html>
  <head>
    <title>Excercise</title>
  </head>
  <body>
    <script>
      // create a root 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set id attribute to 'root' for root div element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

      // append the root div element to body using append
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

      // create a 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set the textContent of div element to 'Hello World'
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

      // append the div element to root div using append method
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
    </script>
  </body>
</html>

Solution Code (Exercise 2)

I hope you learned something from this article and if you like this article then do not forget to give heart, unicorn, etc.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

Blog

JavaScript Rendered Hello World

Bipin Rajbhar

Join Our Newsletter. No Spam, Only the good stuff.

Related