Change HTML Text with JavaScript

This code demonstrates how to change HTML text with JavaScript. It works by defining a message variable and a function, ‘updateMessage,’ which updates the text content of an HTML element with the id ‘message-text.’ It’s helpful for dynamically updating text on a webpage.

You can use this code on your website to dynamically update text, such as announcements, messages, or notifications. It offers real-time information delivery to your visitors, enhances user experience, and keeps your content relevant without requiring manual edits.

How to Create Change HTML Text with JavaScript

1. Ensure you have the HTML structure in place, including the target element with an ID that you want to update. In our example, we have an <h2> element with the ID “message-text.”

<h1>Update Text Function</h1>
<h2 id="message-text">Welcome to our site!</h2>

2. You can style your webpage as desired. (Optional)

body {
  text-align: center;
  font-family: arial, helvetica, san-serif;
  background-color: #3D3E6F;
  color: #ffffff;
 line-height: 3;
}

3. Now, let’s dive into the JavaScript part. The JavaScript code is responsible for updating the text dynamically.

// Creates a variable called message which will hold a new message
var message = 'This is the new message being updated with Javascript!';

// Create a function to update an element with id message-text
function updateMessage() {
  var el = document.getElementById('message-text');
  el.textContent = message;
}

// Calls the function
setTimeout(updateMessage , 2000);

You can modify the message variable with the text you want to display and adjust the delay in setTimeout as per your preferences. The code will automatically update the content of the targeted HTML element.

That’s all! hopefully, you have successfully created Change HTML text with JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.