Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Most efficient way to create HTML elements using jQuery

  • Last Updated : 05 Mar, 2021

In this article, we will look at 4 jQuery techniques that can be used to create an HTML element, and we will be testing out the code for the creation of an element by different methods.

Approach: One of the easier ways is to just use $ (‘<div></div>’) which is great for readability but technically the piece of code will create an <div> element, but it will not add it to your HTML DOM. You need to use some other methods like append(), prepend(), etc.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

It is recommended to run and test the code below and check out the fastest technique for creating an element, as the time taken by the code varies depending upon the web browser. 

For the below code, you must incorporate jQuery into your code. One of the easiest ways to do this is to just copy and paste the jQuery CDN into your HTML header tag. 



CDN link used:

https://code.jquery.com/jquery-3.5.1.min.js

Method 1: In the following example, the document.createElement() method creates the HTML “div” element node. The   date.getTime() method is used to return the number of milliseconds since 1 January 1970. Run the code below to find out its performance.

Syntax: 

$((document.createElement('div')));

HTML




<!DOCTYPE html>
<html>
<head>
  
  <!-- Embedding jQuery using jQuery CDN -->
  <script src=
          integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
          crossorigin="anonymous">
  </script>
</head>
<body>
  <script>
    // returns time in milliseconds
    var start = new Date().getTime(); 
  
        for (i = 0; i < 1000000; ++i) {            
            var e = $((document.createElement('div'))); 
        }
          
        var end = new Date().getTime();
        alert(end - start);       
  </script>
</body>
</html>

Output:

875

Method 2:

Syntax: 

$(('<div>'));

HTML




<!DOCTYPE html>
<html>
<head>
  <!-- Embedding jQuery using jQuery CDN -->
  <script src=
          integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
          crossorigin="anonymous">
  </script>
</head>
<body>
  <script>
    // returns time in milliseconds
    var start = new Date().getTime(); 
  
        for (i = 0; i < 1000000; ++i) {
            var e = $(('<div>'));     
        }
          
        var end = new Date().getTime();
        alert(end - start);       
  </script>
</body>
</html>

Output:

1538

Method 3:



Syntax:

$(('<div></div>'));

HTML




<!DOCTYPE html>
<html>
<head>
  
  <!-- Embedding jQuery using jQuery CDN -->
  <script src=
          integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
          crossorigin="anonymous"></script>
</head>
<body>
  <script>
    // returns time in milliseconds
    var start = new Date().getTime();
  
        for (i = 0; i < 1000000; ++i) {
            var e = $(('<div></div>')); 
        }
          
        var end = new Date().getTime();
        alert(end - start);       
  </script>
</body>
</html>

Output:

2097

Method 4:

Syntax:

$(('<div/>'));

HTML




<!DOCTYPE html>
<html>
<head>
  
  <!-- Embedding jQuery using jQuery CDN -->
  <script src=
          integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
     crossorigin="anonymous">
  </script>
</head>
<body>
  <script>
   // returns time in milliseconds
    var start = new Date().getTime(); 
  
        for (i = 0; i < 1000000; ++i) {
            var e = $(('<div/>'));
        }
          
        var end = new Date().getTime();
        alert(end - start);       
  </script>
</body>
</html>

Output:

2037

For better understanding, try running benchmarks on JavaScript engines.

Conclusion: The $(document.createElement(‘div’)); is the fastest method, even the benchmarking supports, this is the fastest technique to create an HTML element using jQuery. 

Reason: It is because jQuery doesn’t have to identify it as an element and create the element itself.

Alternate way: Using just document.createElement(‘div’) without jQuery will increase the efficiency a lot and will also append the element to DOM automatically.




My Personal Notes arrow_drop_up
Recommended Articles
Page :