What is the equivalent method of document.createElement() in jQuery ?

Last Updated : 28 Mar, 2023

jQuery is a popular JavaScript library that simplifies the process of manipulating HTML elements and creating dynamic web pages. In jQuery, there are several ways to create new HTML elements dynamically. One of the common ways is to use the $() method to create new elements, but there is also a method that is equivalent to the native document.createElement() method. In this article, we will discuss two different ways to create new HTML elements in jQuery, including the equivalent of document.createElement().

There are 2 Ways:

Using the $() method
Using the jQuery() method, which is equivalent to $(document.createElement()).

Approach 1: Using the $() method: We use the $() method to create a new div element, add some content to it using the jQuery html() method, and then append it to the existing element when the button is clicked. We use the on() method to attach a click event listener to the button. When the button is clicked, the method inside the on() method is executed. When you load this page in your browser and click the “Add new div” button, you should see the new div element with its content appended to the existing element.

Example 1: In this example, we have used the $() method in order to create new HTML elements.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>jQuery Create Element Example</title> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div id="container"> 
        <h2 style="color:green;"> 
            Welcome To GFG</h2> 
        <p>creating div tag using the $() function</p> 
        <button id="add-div-button">Add new div</button> 
    </div> 
  
    <script> 
        
        // When the button is clicked, create a new 
        // div element using the $() function and 
          // append it to the container 
        $('#add-div-button').on('click', function () { 
            const $newDiv = $('<div>'); 
            $newDiv.html('<p>Div tag created!</p>'); 
            $('#container').append($newDiv); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Approach 2: Using the jQuery() method: In this example, we create a new div element using the jQuery() method and add some content to it using the jQuery html() method. We hide the new div element by default using the hide() method and append it to the existing element. We attach a click event listener to the button using the on() method. When the button is clicked, we toggle the visibility of the new div element using the toggle() method. When you load this page in your browser and click the “Toggle new div” button, you should see the new div element with its content either shown or hidden.

Example 2: In this example, we have used the jQuery() method to create the new element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        jQuery Create Element Example 
      </title> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div id="container"> 
        <h2 style="color:green;">Welcome To GFG</h2> 
        <p>Creating div tag using the jQuery() function</p> 
        <button id="toggle-div-button">Toggle new div</button> 
    </div> 
  
    <script> 
          
        // Create a new div element using the 
          // jQuery() function 
        const $newDiv = jQuery('<div>'); 
        $newDiv.html('<p>New content here.</p>'); 
  
        // Hide the new div element by default 
        $newDiv.hide(); 
  
        // Append the new div element to the container 
        $('#container').append($newDiv); 
  
        // Toggle the visibility of the new div element  
        // when the button is clicked 
        $('#toggle-div-button').on('click', function () { 
            $newDiv.toggle(); 
        }); 
    </script> 
</body> 
  
</html>