How to Change Text on Every Refresh or Page Load?

Hi Friends !!
In this article, we learn that how to change text or images on every page load. With a little help of jQuery, we will show sections randomly on page load. Let’s start …


At first, you need to define HTML structure as you want. We added here photo, name, identity & description of some famous personalities. HTML code as follows:

But we can not add above code directly in HTML. We have to add above HTML structure in jQuery. jQuery will put above HTML code in below div. So you need to create only one blank div #random_quotes in your HTML.


Now here in jQuery, we define name as Personality Name, type as his Identity, imagepath as his Picture & quote as Description. Then you have to put details as below example.

After details, we put HTML structure in the jQuery which we created earlier in this article. It will display in #random_quotes div. See below example:


Now, design you HTML structure with CSS.

That’s All !!
See Live example below. For Refresh / Reload, please click on Rerun placed in bottom-right corner in below example.

See the Pen How to Change Text on Every Refresh or Page Load? by Web Mantras (@webmantras) on CodePen.dark

Leave a Reply

Your email address will not be published. Required fields are marked *