Open In App

How to insert an object before all paragraphs using jQuery ?

Last Updated : 06 Jun, 2023
Like Article

jQuery is a Javascript library to ease the task of web developers. Developers can use the Jquery library rather than using Javascript in their code. Jquery provides a lot of good features like DOM manipulation, event handling, AJAX support, etc.

It is highly recommended to learn the basics of HTML, CSS, and Javascript before learning Jquery.

Approach: You can insert a jQuery object before all paragraphs by using the method called .before().

before(): This method is used to insert content specified by the parameter, before each element in the set of matched elements. It can accept any number of additional argument like – .prepend() and .after().

isnertBefore(): It is similar to the above function but the content precedes the method and is inserted before the target, which in turn is passed as the .insertBefore() method’s argument.



Example: In this example we are using the above-explained approach.


<!DOCTYPE html>
    <script src=
    <style type="text/css">
        button {
            display: block;
            margin: 20px 0 0 0;
    <h1 style="color: green;">
        How to insert a jQuery object before
        all paragraphs using jQuery?
    <p>PHP Tutorial</p>
    <p>Python Tutorial</p>
    <p>Java Tutorial</p>
    <button id="button1">
        Click to see the effect
        $("#button1").click(function () {


  • Before click: In the body element, we have initially 3 different paragraphs named – PHP tutorial, Python Tutorial, and Java Tutorial.
  • After click: After clicking the button, You can now notice that is inserted before each paragraph.


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads