Create a paragraph element with some text and append it to end of document body using jQuery

Last Updated : 31 Dec, 2020

In this article, we will create a paragraph element with some text and append it to the end of the document body using jQuery. To append some text at the end of the document body, we use add() and appendTo() methods. The jQuery add() method is used to add elements to the existing group of elements. This method can add elements to the whole document, or just inside the context element if the context parameter is defined.

Syntax:

$(selector).add(element, context_parameter)

The jQuery appendTo() is an inbuilt method that is used to insert an HTML element at the end of the selected element.

Syntax:

$(content).appendTo(selector)

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
     
    <!-- 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 () { 
                $("button").add(" 
                    <p>Hello World!</p>") 
                    .appendTo(document.body); 
            }); 
        }); 
    </script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to create a paragraph element with 
        some text and append it <br>to the end 
        of the document body using jQuery? 
    </h3> 
      
    <p>GeeksforGeeks computer science portal</p> 
  
    <span>GeeksforGeeks</span> 
    <br><br> 
  
    <button>Click Here!</button> 
</body> 
  
</html>