Benchmark: createElement vs innerHTML(template)

Tests:

createElement
const list = []; let n = 0; while(true) { n++; list.push( document.createElement('div') .appendChild( Object.assign(document.createElement('p'), { className: 'font-bold', textContent: 'Hello!' }) ) ); if(n===100000) break; }
innerHTML
const list = []; let n = 0; const template = document.createElement('template'); while(true) { n++; template.innerHTML = '<div><p class="font-bold">Hello!</p></div>'; list.push(template.content.cloneNode(true)); if(n===100000) break; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Test name	Executions per second
createElement	14.9 Ops/sec
innerHTML	3.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its various components.

**Benchmark Definition**

The benchmark definition is represented by two JSON objects: one for the overall benchmark and individual test cases. The overall benchmark definition provides some metadata about the benchmark, such as its name, description, and preparation code. However, in this case, both the script preparation code and HTML preparation code are set to null, which means that the browser will generate these elements automatically.

**Individual Test Cases**

The benchmark consists of two individual test cases: "createElement" and "innerHTML". These test cases aim to compare the performance of creating new DOM elements using two different approaches:

1.  **createElement**: This approach creates a new `div` element using `document.createElement()` and then appends a child element (a `p` element with specific text content) using `appendChild()`. The process is repeated 100,000 times.
2.  **innerHTML**: This approach uses a `template` element to create the HTML structure, sets its innerHTML to a string containing the desired HTML, and then clones this template and pushes the cloned element into an array.

**Options Compared**

The benchmark compares the performance of two approaches:

*   `createElement`: Creates new DOM elements manually using `document.createElement()` and appends child elements.
*   `innerHTML`: Uses the `innerHTML` property to create the desired HTML structure and then clones it.

**Pros and Cons of Each Approach**

*   **createElement**: This approach provides more control over the creation process, as you can easily add or remove attributes from individual elements. However, it may be slower due to the overhead of creating and appending elements.
*   **innerHTML**: This approach is generally faster, especially for large amounts of data, since it allows the browser to optimize the HTML structure and rendering. Additionally, this method eliminates the need for explicit appending operations.

**Library Usage**

The benchmark uses the `template` element, which is a standard HTML5 element that allows you to create HTML structures as strings and then clone them. The `innerHTML` property is used to set the content of the template element.

**Special JS Feature/Syntax**

This benchmark does not utilize any special JavaScript features or syntax. It only leverages standard DOM methods like `document.createElement()`, `appendChild()`, and `innerHTML`.

**Other Alternatives**

For creating new DOM elements, you can also consider other approaches, such as:

*   **fragment**: Using the DocumentFragment API to create a temporary container element that can be appended to.
*   **element.append().append()` (Modern Approach): A newer approach using modern browser APIs like `Element.append()` and its variants.

These alternatives may offer improved performance or more efficient code for specific use cases.

Related benchmarks:

createElement vs innerHTML(template) (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs innerHTML

Created: 3 years ago by: Guest

Jump to the latest result

createElement

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):