How to Change HTML Elements with JavaScript

So, you’ve learned how to find those HTML “bricks” on your webpage using JavaScript. Great! But what if you want to do more than just locate them? What if you want to change their content, appearance, or even their behavior? That’s where the magic of modifying HTML elements comes in.

This post will be your guide to understanding the most common and effective ways to dynamically change HTML elements using JavaScript. We’ll answer your questions in plain language and show you how to bring your web pages to life.

Why Change HTML Elements Dynamically?

Imagine a button that changes its text after you click it, or a website theme that switches from light to dark mode instantly. These are just a few examples of how dynamically changing HTML elements enhances user experience and interactivity.

Key takeaway: Dynamically modifying HTML allows you to create engaging, responsive, and user-friendly websites.

The Four Core Methods for Modifying HTML Elements

JavaScript offers several ways to manipulate HTML elements. Here are four fundamental methods you’ll use frequently:

• element.innerHTML = new htmlContent
• element.attribute = newValue
• element.setAttribute(attribute, value)
• element.style.property = new style

Let’s explore each one in detail.

element.innerHTML = new htmlContent: Updating the Inside Story

What is it?

This method lets you change the entire content within an HTML element, including any nested HTML tags. It’s like replacing everything inside a container with something new.

How does it work?

You select the HTML element you want to modify and then assign a new string of HTML content to its innerHTML property.

Example:

<div id="message">Hello, world!</div>

const messageDiv = document.getElementById("message");
messageDiv.innerHTML = "<strong>Welcome to our website!</strong>";

Now, the div with the ID “message” will display ” Welcome to our website! ” with the word “Welcome” in bold.

When to use it?

Use innerHTML when you need to replace the entire content of an element with new HTML, including text, images, or other elements.

Important Note: Security Concerns

Be cautious when using innerHTML with content that comes from user input or external sources. It can potentially introduce security vulnerabilities like cross-site scripting (XSS) attacks if not handled properly. Always sanitize user input before injecting it using innerHTML. External Link to OWASP on Cross-site Scripting (XSS)

element.attribute = newValue: Directly Changing Attributes

What is it?

Many HTML elements have attributes that define their behavior or provide additional information (e.g., src for images, href for links, value for input fields). This method allows you to directly change the value of these attributes.

How does it work?

You access the attribute as a property of the HTML element object and assign a new value to it.

Example:

<img id="logo" src="old-logo.png" alt="Old Logo">

const logoImage = document.getElementById("logo");
logoImage.src = "new-logo.png";
logoImage.alt = "New Logo";

This code will update the image source and the alt text of the image with the ID “logo”.

When to use it?

Use this method for common and well-known attributes where direct access is straightforward.

element.setAttribute(attribute, value): A More Robust Way to Handle Attributes

What is it?

This method provides a more general and often preferred way to set or change the value of an attribute on an HTML element. It’s particularly useful for attributes that might not have a direct corresponding property on the element object or for custom attributes.

How does it work?

You call the setAttribute() method on the HTML element, passing the name of the attribute as the first argument and the new value as the second argument.

Example:

<button id="myButton" data-user-id="123">Click Me</button>

const button = document.getElementById("myButton");
button.setAttribute("disabled", "true"); // Disable the button
button.setAttribute("data-user-id", "456"); // Update a custom data attribute

This code will disable the button and update the value of the custom data-user-id attribute.

When to use it?

Use setAttribute() for:

• Attributes that don’t have a direct property (like disabled or custom data-* attributes).
• More explicit and consistent attribute manipulation.

Example Case Study: Imagine you’re building a form. When a user submits invalid data, you might use setAttribute("disabled", "true") on the submit button to prevent multiple submissions until the errors are corrected. Once the data is valid, you can use setAttribute("disabled", "false") to re-enable the button.

element.style.property = new style: Styling Elements on the Fly

What is it?

This method allows you to directly change the CSS styles of an HTML element using JavaScript. You can modify properties like color, font size, visibility, and much more.

How does it work?

You access the style property of the HTML element, which is an object containing all the inline styles. Then, you set the desired CSS property (using camelCase notation, e.g., backgroundColor instead of background-color) to a new value.

Example:

<p id="greeting" style="color: green;">Hello!</p>

const greetingParagraph = document.getElementById("greeting");
greetingParagraph.style.color = "blue";
greetingParagraph.style.fontSize = "20px";
greetingParagraph.style.backgroundColor = "yellow";

This code will change the text color to blue, the font size to 20 pixels, and add a yellow background to the paragraph.

When to use it?

Use this method for:

• Applying dynamic styling based on user interactions or data changes.
• Simple, one-off style modifications.

Note: For more complex styling or managing styles across multiple elements, it’s generally better to add or remove CSS classes using the element.classList property.

Putting It All Together: A Practical Example

Let’s say you have a button that, when clicked, changes its text and background color:

<button id="actionButton">Click Me</button>

const actionButton = document.getElementById("actionButton");

actionButton.addEventListener("click", function() {
  actionButton.innerHTML = "<strong>Clicked!</strong>";
  actionButton.style.backgroundColor = "lightgreen";
  actionButton.setAttribute("disabled", "true");
});

In this example, when the button is clicked:

• Its inner HTML is changed to ” Clicked! “.
• Its background color is set to light green.
• It’s disabled to prevent further clicks.

Best Practices for Changing HTML Elements

• Target elements efficiently: Use the most specific selectors to avoid unintended modifications.
• Keep your code readable: Use meaningful variable names and comments to explain your intentions.
• Consider performance: Frequent and complex DOM manipulations can sometimes impact performance. Optimize your code where necessary.
• Separate concerns: For complex styling, consider using CSS classes instead of directly manipulating the style property.

Conclusion: Unleash the Power of Dynamic Content

Mastering how to change HTML elements with JavaScript is a crucial step in becoming a proficient web developer. By understanding and utilizing methods like innerHTML, direct attribute assignment, setAttribute, and the style property, you can create truly interactive and engaging web experiences.

Ready to experiment with changing HTML elements?

• Try it yourself! Open your browser’s developer console and try modifying elements on your favorite websites (just remember these changes are temporary and only visible to you).
• Explore further! Look into other methods for manipulating the DOM (Document Object Model), such as creating and removing elements.
• Share your creations! What cool things have you built by dynamically changing HTML? Tell us in the comments below!