Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 and Append Paragraph Element 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.
88 Views
