JavaScript document.getElementById()

The JavaScript document.getElementById() method is used when we need to get an HTML element using its ID value. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The value is <span id="x"></span>.</p>
   
   <script>
      var element = document.getElementById("x");
      element.innerHTML = 10;
   </script>
   
</body>
</html>

Output

The value is .

Note: An HTML element's innerHTML property serves as a representation of the HTML contained within that element. It can be used to obtain or set an element's HTML content.

In the above example, using the following statement:

var element = document.getElementById("x");

the element whose ID value is "x" will be initialized in the "element" variable. And using the following statement:

element.innerHTML = 10;

The value 10 was set as the content of the returned element. If the returned element using its ID value already has some content, then the existing content will be removed and the new content using the innerHTML will be set to it.

The above example can also be written in this way:

<!DOCTYPE html>
<html>
<body>

   <p>The value is <span id="x"></span>.</p>
   
   <script>
      document.getElementById("x").innerHTML = 10;
   </script>
   
</body>
</html>

JavaScript document.getElementById() syntax

The syntax of the document.getElementById() method in JavaScript is:

document.getElementById(elementID)

The getElementById() function returns an Element object if the specified elementID exists. Otherwise, it returns null.

JavaScript document.getElementById() example

The document.getElementById() method in JavaScript is used when we need to edit (or apply styles to) an HTML element. For example, the following JavaScript program changes the color of an HTML element whose ID value is cc:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The name of website is <span id="cc">codescracker.com</span></p>
   
   <script>
      var element = document.getElementById("cc");
      element.style.color = "red";
   </script>
   
</body>
</html>

Output

The name of website is codescracker.com

Note: If the specified ID matches multiple elements, then the first element will be returned. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The name of website is <span id="100">codescracker.com</span></p>
   <p>The name of website is <span id="100">codescracker.com</span></p>
   
   <script>
      var element = document.getElementById("100");
      element.style.color = "red";
   </script>
   
</body>
</html>

Output

The name of website is codescracker.com

Although ID is unique, we need to be aware of how things work when multiple elements exist with the same ID.

Let me create another example of a document.getElementById() method in JavaScript, where the color of text codescracker.com changes when the user clicks on the button. Also, I've changed the font size of the text before changing the color by clicking on the button:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="1">codescracker.com</p>
   <button onclick="chCol('red');">Change to Red</button>
   <button onclick="chCol('blue');">Change to Blue</button>
   <button onclick="chCol('yellow');">Change to Yellow</button>
   
   <script>
      var element = document.getElementById('1');
      element.style.fontSize = "1.4em";
      function chCol(newCol)
      {
         element.style.color = newCol;
      }
   </script>
   
</body>
</html>

Output

codescracker.com

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!