HTML IDs allow JavaScript to identify and manipulate specific elements on a webpage. By assigning an id attribute to an HTML element, you can select that element and change its text, styles, attributes, or other properties using JavaScript.

This technique is useful for creating interactive websites, updating messages, responding to button clicks, and displaying dynamic content without reloading the page.

What Is the Purpose of Using IDs with JavaScript?

An HTML ID provides a unique identifier for an element within a document. JavaScript can use the document.getElementById() method to find an element with a particular ID.

Here is the basic syntax:

document.getElementById("element-id");

Replace element-id with the ID assigned to your HTML element. To understand how IDs work in HTML, explore HTML IDs.

HTML IDs with JavaScript Example

The following example demonstrates how to change the text of an HTML paragraph using JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML IDs with JavaScript</title>
</head>
<body>

    <h1>Using IDs with JavaScript</h1>

    <p id="message">Welcome to HTML!</p>

    <button onclick="changeText()">Change Text</button>

    <script>
        function changeText() {
            document.getElementById("message").textContent =
                "The text has been updated!";
        }
    </script>

</body>
</html>

In this example, the paragraph has the ID message. When the user clicks the button, JavaScript selects that paragraph and changes its text using the textContent property.

Changing CSS Styles Using IDs

JavaScript can also change the appearance of an element by accessing its style property.

<p id="description">Learn JavaScript.</p>

<button onclick="changeColor()">Change Color</button>

<script>
    function changeColor() {
        document.getElementById("description").style.color = "blue";
    }
</script>

When the button is clicked, the paragraph text changes to blue. This technique is useful for simple visual changes and interactive webpage features.

Common JavaScript Methods for HTML IDs

Several JavaScript properties and methods work with elements selected by ID.

Method or Property	Purpose
getElementById()	Selects an element by its ID
textContent	Reads or changes text content
innerHTML	Reads or changes HTML content
style	Accesses inline CSS styles
setAttribute()	Sets an HTML attribute
classList	Adds, removes, or toggles CSS classes

For reusable styling, you can combine IDs with HTML Classes and CSS classes rather than applying every style directly through JavaScript.

Best Practices for Using IDs with JavaScript

Use unique IDs so JavaScript can identify the intended element correctly. Make sure the element exists before trying to modify it, and use descriptive names that explain its purpose.

For more complex interactions, consider using addEventListener() instead of inline event handlers such as onclick. It separates JavaScript behavior from HTML structure and makes code easier to maintain.

Frequently Asked Questions

How do I select an HTML element by ID in JavaScript?

Use document.getElementById("myId"), replacing myId with the element’s actual ID.

Can JavaScript change HTML content using an ID?

Yes. JavaScript can select the element and update its content using properties such as textContent or innerHTML.

Can two elements have the same ID?

IDs should be unique within a document. Duplicate IDs can cause JavaScript to target an unintended element.

Can I change CSS using JavaScript IDs?

Yes. You can use element.style to change inline styles or element.classList to add and remove CSS classes.

You can also explore Class vs ID to understand when to use each attribute in your HTML and JavaScript projects.