Learn how to use jQuery’s prepend() method to dynamically insert text or HTML at the beginning of any container. This easy tutorial works on all websites, letting you add custom messages, headers, or notifications without editing the page’s HTML directly.
📄
filename.js
jQuery(document).ready(function($){
$(".inner-container").prepend(
"<div class='hs-header-box'> <p>Text you want to add</p></div>"
);
});
How It Works:
- jQuery(document).ready() ensures the code runs after the page fully loads.
- $(“.inner-container”) selects the container where you want to prepend content.
- .prepend() inserts your HTML at the beginning of the selected element.
- Replace “the text you want to add” with your custom message or HTML.
Why Use jQuery Prepend:
- Quickly add notifications, banners, or custom content to any website.
- No need to edit HTML files directly.
- Works on all websites with jQuery enabled, not just WordPress.
