Benchmark: Move Element to another

HTML Preparation code:

<table class="old">
	<tbody>
		<tr>
			<td class="old-td">old-td</td>
		</tr>
	</tbody>
</table>

<table class="new">
	<tbody>
		<tr class="new-tr">
		</tr>
	</tbody>
</table>

Script Preparation code:

var table_td = document.getElementsByClassName('old-td')[0],
    table_new_tr = document.getElementsByClassName('new-tr')[0];

Tests:

innerHTML += (remove)
table_new_tr.innerHTML += table_td.outerHTML; table_td.remove();
innerHTML += (display none)
table_new_tr.innerHTML += table_td.outerHTML; table_td.style.display = 'none';
appendChild
table_new_tr.appendChild(table_td);
insertAdjacentElement
table_new_tr.insertAdjacentElement('beforeend', table_td);
insertAdjacentHTML (remove)
table_new_tr.insertAdjacentHTML('beforeend', table_td.outerHTML); table_td.remove();
insertAdjacentHTML ( display none )
table_new_tr.insertAdjacentHTML('beforeend', table_td.outerHTML); table_td.style.display = 'none'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML += (remove)
innerHTML += (display none)
appendChild
insertAdjacentElement
insertAdjacentHTML (remove)
insertAdjacentHTML ( display none )

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Measuring the performance of different ways to insert or manipulate elements in HTML is an essential task for any web developer.

**Benchmark Overview**

The benchmark measures the performance of six different approaches to move an element from one table cell (`table_td`) to another table row (`table_new_tr`):

1. Using `innerHTML`
2. Setting `display` to `'none'` and then using `innerHTML`
3. Appending `table_td` directly to `table_new_tr`
4. Using `insertAdjacentElement('beforeend', table_td)`
5. Using `insertAdjacentHTML('beforeend', table_td.outerHTML)` with removal
6. Using `insertAdjacentHTML('beforeend', table_td.outerHTML)` with display set to `'none'`

**Library Used:**

In all test cases, the HTML preparation code includes two tables with two elements each:

* One table (`table_old`) with one element (`old-td`) containing the text "old-td".
* Another table (`table_new`) with one element (`new-tr`) without any content.

The JavaScript script preparation code uses `document.getElementsByClassName` to get references to these elements.

**Special JS Features/ Syntax:**

There is no special JavaScript feature or syntax used in this benchmark, just standard JavaScript and HTML features.

**Pros and Cons of Different Approaches:**

1. **Using `innerHTML`:**
	* Pros: Simple, easy to implement.
	* Cons: Can be slow due to string concatenation and parsing.
2. **Setting `display` to `'none'`:**
	* Pros: Can reduce the size of the HTML document.
	* Cons: May not work well with older browsers that don't support `display` property.
3. **Appending directly to `table_new_tr`:**
	* Pros: Fast, efficient way to add elements.
	* Cons: Requires careful consideration of element order and layout.
4. **Using `insertAdjacentElement('beforeend', table_td)`:**
	* Pros: Fast, efficient way to add elements while maintaining insertion point.
	* Cons: May not work well with older browsers that don't support this method.
5. **Using `insertAdjacentHTML('beforeend', table_td.outerHTML)`:**
	* Pros: Can reduce the size of the HTML document and is faster than concatenating strings.
	* Cons: Requires careful consideration of element order and layout, as it uses a separate method to render the HTML.
6. **Using `insertAdjacentHTML('beforeend', table_td.outerHTML)` with display set to `'none'`:**
	* Pros: Combines efficiency with control over display state.
	* Cons: May be slower than other methods due to additional rendering steps.

**Other Alternatives:**

1. **DOM Traversal:** Instead of appending elements directly, you could use DOM traversal methods like `appendChild`, `insertBefore`, or `querySelector` to achieve the same result.
2. **Templating Engines:** Using a templating engine like Handlebars or Mustache can simplify the process of generating HTML content and reduce the need for string concatenation and parsing.

In conclusion, this benchmark provides valuable insights into the performance differences between various approaches to manipulating elements in HTML. The results can help developers choose the best method for their specific use cases, taking into account factors like performance, maintainability, and browser support.

Latest run results:

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

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

Browser/OS: Chrome 99 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML += (remove)	241.9 Ops/sec
innerHTML += (display none)	115.0 Ops/sec
appendChild	1495021.1 Ops/sec
insertAdjacentElement	1481970.4 Ops/sec
insertAdjacentHTML (remove)	164314.0 Ops/sec
insertAdjacentHTML ( display none )	135656.6 Ops/sec

Related benchmarks:

Move Element to another (version: 2)

Comparing performance of: innerHTML += (remove) vs innerHTML += (display none) vs appendChild vs insertAdjacentElement vs insertAdjacentHTML (remove) vs insertAdjacentHTML ( display none )

Created: 5 years ago by: Registered User

Jump to the latest result

innerHTML += (remove)

innerHTML += (display none)

appendChild

insertAdjacentElement

insertAdjacentHTML (remove)

insertAdjacentHTML ( display none )

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):