How to insert an object before all paragraphs using jQuery ?

How to insert an object before all paragraphs using jQuery ?

Last Updated : 06 Jun, 2023

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.

Syntax:

$(target).before(contentToBeInserted).
$(contentToBeInserted).insertBefore(target).

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

HTML

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
    <style type="text/css">
        button {
            display: block;
            margin: 20px 0 0 0;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        How to insert a jQuery object before
        all paragraphs using jQuery?
    </h3>
    <p>PHP Tutorial</p>
    <p>Python Tutorial</p>
    <p>Java Tutorial</p>
    <button id="button1">
        Click to see the effect
    </button>
    <script>
        $("#button1").click(function () {
            $("p").before("<i>GeeksForGeeks.com</i>");
        });
    </script>
</body>
</html>

Output:

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 GeeksForGeeks.com is inserted before each paragraph.

How to insert an object before all paragraphs using jQuery ?

K

krishnanand3

Improve

Article Tags :

Similar Reads

How to insert a jQuery object after all paragraphs using jQuery ?

The task is to insert a jQuery object after all the paragraphs using jQuery. Approach: Create DOM element or jQuery object using <span> tag.Create a paragraph using <p> tag.Create a button using button tag after clicking on which the object will be inserted after paragraph.Write a script

How to append a jQuery object to all paragraphs using jQuery ?

In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() M

How to insert a DOM element after all paragraphs using jQuery ?

In this article, we will insert a DOM element after all paragraph elements using jQuery. To insert a DOM element we use after() and createTextNode() methods. The createTextNode() method is used to create a TextNode which contains an element node and a text node. It is used to provide text to an elem

How to insert some HTML after all paragraphs using jQuery ?

In this article, we will insert some HTML content after all paragraphs using jQuery. To add some content after all paragraph elements, we use the after() method. This method is used to insert the specified content after each selected element in the set of matched elements. Syntax: $( selector ).afte

How to find all paragraph elements using jQuery ?

Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the el