Benchmark: Compare method createElement vs string template using insertAdjacentHtml

HTML Preparation code:

<div id="testdiv">
  <div class="unique">test</div>
</div>

Script Preparation code:

var i, imax;
var div = document.getElementById('testdiv');

Tests:

createElement
var newDiv = document.createElement('div'); newDiv.classList.add('unique'); newDiv.innerText = 'test'; div.innerHTML = newDiv;
template string
var newDiv = `<div class="unique">test</div>`; div.insertAdjacentHTML("beforeend",newDiv)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
template string

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Windows

View result in a separate tab

Test name	Executions per second
createElement	572999.4 Ops/sec
template string	863799.0 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 explain what is being tested, compared, and other considerations.

**Benchmark Definition**

The benchmark is designed to compare two approaches for inserting HTML content into an existing HTML element:

1. `createElement` method: Creating a new `div` element using `document.createElement()` and then modifying its properties (class name and text content).
2. String template with `insertAdjacentHTML()`: Using a string template (`<div class="unique">test</div>`) and inserting it into the `div` element using `insertAdjacentHTML()`.

**Options Compared**

The two options are being compared in terms of:

* Performance: How long does each approach take to execute?
* Memory usage: How much memory is allocated by each approach?

**Pros and Cons of Each Approach**

1. **createElement method**
	* Pros:
		+ Can be more flexible, as it allows for custom element creation.
		+ May be suitable for complex HTML structures.
	* Cons:
		+ Requires creating a new DOM element, which can lead to increased memory usage.
		+ May require additional steps (e.g., appending the created element to the parent).
2. **String template with `insertAdjacentHTML()`
	* Pros:
		+ Efficiently inserts HTML content without requiring document creation or manipulation.
		+ Can be more concise, as it uses a string template.

* Cons:
		+ Limited flexibility for customizing the inserted element's properties.
		+ May require additional steps to ensure proper insertion (e.g., specifying the position).

**Library and Special JS Feature**

The `insertAdjacentHTML()` method is a part of the DOM API, which is built-in to most modern browsers. No external library or special JavaScript feature is required.

However, if you're using an older browser that doesn't support `insertAdjacentHTML()`, you can use alternative methods like `innerHTML` or `appendChild()` with some creative manipulation.

**Other Considerations**

When evaluating this benchmark, keep in mind:

* The test cases are designed to focus on performance and memory usage, but the actual behavior may vary depending on the specific use case.
* The `createElement` method might be more suitable for scenarios where flexibility is crucial (e.g., dynamic DOM manipulation).
* The string template with `insertAdjacentHTML()` might be preferred for scenarios where conciseness and efficiency are important.

**Alternatives**

If you're looking for alternatives or variations, consider:

1. Using other HTML insertion methods (e.g., `appendChild()`, `innerHTML`).
2. Implementing custom element creation using CSS templates.
3. Utilizing a library like jQuery to simplify DOM manipulation and insertion.

In summary, this benchmark provides a straightforward comparison between two approaches for inserting HTML content into an existing element, highlighting the trade-offs between flexibility, performance, and memory usage.

Related benchmarks:

Compare method createElement vs string template using insertAdjacentHtml (version: 0)

Compare method createElement vs string template using insertAdjacentHtml

Comparing performance of: createElement vs template string

Created: 3 years ago by: Registered User

Jump to the latest result

createElement

template string

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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