loading...
Cover image for JavaScript Rendered Hello World

JavaScript Rendered Hello World

bipinrajbhar profile image Bipin Rajbhar Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide
Collapse
yoursunny profile image
Junxiao Shi

The xo linter says you are supposed to use querySelector than getElementById.

Collapse
tobto profile image
Yuri Polchenko

the dream