![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a paragraph element with some text and append it to end of document body using jQuery
In this article, the task is to create a paragraph element with some text and append it to end of document body using jQuery.
Using jQuery, it is easy to add new elements/content in a particular position inside an HTML document. We have four methods that are used to add new content:
append() − This method adds the content at the end of selected elements.
prepend() − This method adds the content at the beginning of selected elements.
after() − This method adds the content after the selected elements.
before() − This method adds the content before the selected elements.
Here, the task is to add a paragraph element with some text at the end of the document body. So, we use the append() method.
Syntax
Following is the syntax of the jQuery append() method −
$(selector).append("content");
The "content" is a required parameter. It specifies the content to add (can also contain HTML tags).
Example
In the following example, we are creating a paragraph element with some text and appending it to the end of the document body using jQuery append() method −
<!DOCTYPE html> <head> <title>Append Text Example</title> <!-- Import jQuery cdn library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("body").append("<p>The text is appended.</p>"); }); }); </script> </head> <body style="text-align: center;"> <h1 style="color: seagreen;">Welcome to Tutorialspoint</h1> <p>Click the button below to append text at the end of this document.</p> <button>Click Here!</button> </body> </html>
After executing the above program, click on the button to append the text at the end of the document body.