How To

How to Change Text After Page Load With Javascript

Sometimes we have to change our website content or text dynamically instantly after page load. At that time, JavaScript comes in the frame to help us.

It is effortless to change text content in our HTML webpage after page load.

Change text with innerHTML

There is a simple way to change the text of any element.

We have to use the innerHTML property of our selected element to change the text.

Syntax

document.getElementById(‘id_name’).innerHTML = “new_text”;

Example 1

<!DOCTYPE html>
<html>
<title>How to change text on page load</title>
<body onload="change_text()">
<p id="demo">Errorsea.com is the best website for web designing</p>
<script>
function change_text(){
document.getElementById("demo").innerHTML = "Errorsea.com is the best platform to understand basic consepts of website designing";
}
</script>
</body>
</html>

Explanation

  • First, we create a change_text() function to change the text of the demo element.
  • After that, we set an onload event for change_text() function in <body> tag.

Read Also: How to Change Text OnClick Event JavaScript

Example 2

If we can not set an onload event at <body> tag, we can also use window.onload to set an event for our function in JavaScript.

<!DOCTYPE html>
<html>
<title>How to change text on page load</title>
<body>
<p id="demo">Errorsea.com is the best website for web development</p>
<script>
function change_text(){
document.getElementById("demo").innerHTML = "Errorsea.com is the best platform to understand basic consepts of website development";
}
window.onload=change_text;

</script>
</body>
</html>

Conclusion

I am sure you have no dought about adding text using JavaScript after page load.

Enjoy Errorsea 🙂

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.

Recent Posts

5 Important Things To Know About WordPress Before You Use It

There is a reason big-name companies like CNN use WordPress. WordPress is a popular content…

3 years ago

How to Install MySQL on Your PC in 3 Easy Steps

In this tutorial, I'm going to show you how to install MySQL on your computer.…

5 years ago

Download and Install Turbo C++ for Windows 10 (Full Installation Guide)

Download Turbo C++ for windows 10 in just 7 Mb and run your first C++…

5 years ago

PHP .HTACCESS Redirects

We can redirect any webpage to any other or redirect the whole domain or website…

5 years ago

PHP Redirect Pages

There are lots of methods to redirect pages, like refresh-redirect from META tag, redirect from…

5 years ago

PHP Include & Required

Include files in PHP are used in appending various global or config files. We can…

5 years ago