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.
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>
<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>
<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>
<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>
<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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...