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>
<!-- Embedding jQuery using jQuery CDN -->
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
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=
"https://code.jquery.com/jquery-3.5.1.min.js"
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=
"https://code.jquery.com/jquery-3.5.1.min.js"
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=
"https://code.jquery.com/jquery-3.5.1.min.js"
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.
Similar Reads
How to create an HTML element using jQuery ? In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html)
2 min read
Create a Div Element using jQuery In this article, we will see how to create a <div> element using jQuery. We can create a div element with the following steps: Steps to Create a Div ElementCreate a new <div> element.Choose a parent element, where to put this newly created element.Put the created div element into the par
2 min read
How to create hidden form element on the fly using jQuery ? JQuery is the library that makes the use of JavaScript easy. Inserting the <input type='hidden'> can also be done using jQuery. The append() and appendTo() inbuilt function can be used to add the hidden form element but they are not only limited to the <input type='hidden'> but we can al
2 min read
How to attach a method to HTML element event using jQuery ? In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery.There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which will
2 min read
How to get the outer html of an element using jQuery ? Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to
2 min read
How to Wrap an Element with Another Div Using jQuery? We will see how to wrap an element with another div in jQuery. We will simply wrap an element inside a div tag in jQuery. These are the following approaches: Table of Content Using wrap() method Using wrap.inner() methodApproach 1: Using wrap() method We include the jQuery library in the <head
3 min read
How to create a div element in jQuery ? There are various method to create HTML element inside an HTML document using JQuery. But the simplest of all is append() and prepend() method. Method 1: Using prepend() Method: The prepend() method is used to insert a specified content at the beginning of the selected element. Example: This example
2 min read
How to create a div using jQuery with style tag ? Creating an <div> element with a style tag using jQuery can be done in the following steps. Steps: Create a new <div> element.Create an object with all the styles that we want to apply.Choose a parent element, where to put this newly created element.Put the created div element into the p
2 min read
How to iterate through child elements of a div using jQuery ? jQuery Selector can be used to find (select) HTML elements from the DOM. Once an element is selected, the jQuery children() method is called to find all the child elements of the selected element. To loop through the child elements, the jQuery each() method is used as demonstrated in the following e
3 min read
How to add options to a select element using jQuery? We will dynamically add the options to the select element using jQuery. jQuery has a lot of in-built methods. But, we will use some of them to accomplish the purpose of dynamically adding the options to the select element as listed below:Table of ContentBy passing the HTML of the option tag to the a
4 min read