Home » Tutorials » Learn Javascript » JavaScript Basic DOM Interaction (getElementById & innerHTML)

Learn Javascript

 Prev

JavaScript Basic DOM Interaction (getElementById & innerHTML)

This lesson is about just getting to know the HTML Document Object Model and it’s power using JavaScript using the two most basic DOM actions: getElementById method and innerHTML property.

What are DOM methods? Well, they’re just regular JavaScript Methods that does some specific action with the elements of an HTML webpage.

Using getElementById method in JavaScript 🔎

The getElementById method in JavaScript helps us to find and select a specific HTML element that has the given id.

Note: In HTML, an id attribute is unique for each element. That means, we cannot have two or more elements having the same id.

Syntax

document.getElementById(id)

We can use the getElementById method by invoking it using the document object. The getElementById method like many others, is a method of the document object.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1 id="myHeading">Hi, I'm a Heading.</h1>
    <p id="myParagraph">I'm a paragraph.</p>

    <script>
      //Display the selected HTML element.
      console.log(document.getElementById("myHeading"));
      console.log(document.getElementById("myParagraph"));
    </script>
  </body>
</html>

Output

Using the getElementById method
Using the getElementById method

Explanation 🤯

  1. Inside the script tag, we write our JavaScript code.
  2. Here, we first accessed the h1 element with the content “Hi, I’m a Heading.” having myHeading as the id.
  3. Then, we accessed the p element with the content “I’m a paragraph.” having myParagraph as the id.

Using innerHTML property in JavaScript 👇

The innerHTML property returns the content of the selected HTML element. In addition to that, we can also change the content of the selected HTML element using the innerHTML property.

Syntax

element.innerHTML

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1 id="myHeading">Hi, I'm a Heading.</h1>
    <p id="myParagraph">I'm a paragraph.</p>

    <script>
      // Displaying the content of the element having the "id" of "myHeading".
      console.log(document.getElementById("myHeading").innerHTML);

      // Changing the content of the element having the "id" of "myHeading".
      document.getElementById("myHeading").innerHTML = "I'm a Heading and I'm big and strong.";

      // Displaying the updated content of the "myHeading" element.
      console.log(document.getElementById("myHeading").innerHTML);
    </script>
  </body>
</html>

Output

Using the innerHTML property
Using the innerHTML property

Explanation 🤯

  1. Inside the script tag, we write our JavaScript code.
  2. Here, we first selected the h1 element having id of “myHeading” using the getElementById method and then, accessed it’s content “Hi, I’m a Heading.” using the innerHTML property. Then, displayed it’s content.
  3. Then, we updated it’s content into “I’m a Heading and I’m big and strong.“.
  4. Finally, we accessed the element again to display the updated content.

These two are just a taste of the tremendous functionality the Document Object Model provides for the web and gives us the power to make a webpage truly interactive using JavaScript.

In later lessons, we will go down even further to understand the full power of the DOM.

Next