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() 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= </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
Please Login to comment...