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

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

Last Updated : 05 Jun, 2023

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() Method: This method is used to specify a function to execute when the DOM is fully loaded.
click() Method: This method is used to trigger the click event, or attaches a function to run when a click event occurs.
append() Method: This method is used to insert specified content at the end of the selected elements.

Approach:

Create the HTML page with paragraph <p> elements.
Next, write a script to append the object to the paragraph element.

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

HTML

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
        body {
            text-align: center;
            font-size: 20px;
        }

        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }

        object {
            font-size: 30px;
            color: lightgreen;
            background-color: green;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").append(
                    "<object>This is object</object>.");
            });
        });
    </script>
</head>

<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <b>
        Click on the button to append object
        at the end of every paragraph.
    </b>

    <p>This is a paragraph.</p>

    <p>This is another paragraph.</p>

    <button>Append Object</button>
</body>
</html>

Output:

Append object

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

A

abhishekpal97854368

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 insert an object before all paragraphs using jQuery ?

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,

How to append some text to all paragraphs using jQuery ?

In this article, we will append some text to all paragraph elements using jQuery. To append some text to all paragraph elements, we use append() and document.createTextNode() methods. jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).appen

How to find all textarea and paragraphs to make a border using jQuery ?

Given a set of textareas, the task is to apply a border on each of them and subsequently add some paragraphs and then define a border on every paragraph using the jQuery library. Approach 1: Using the click(), css() and add() methods in jQuery: There are two textareas, two paragraphs, and one button

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