Benchmark: Move Element to another 2

HTML Preparation code:

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

Script Preparation code:

var table_new_tr = document.getElementsByClassName('new-tr')[0];
var createElement = (() => {
    const tempDiv = document.createElement('div');

    return htmlString => {
        tempDiv.innerHTML = htmlString.trim();
        return tempDiv.removeChild(tempDiv.firstChild);
    };
})();

Tests:

innerHTML
table_new_tr.innerHTML = '<div>el</div>';
appendChild
table_new_tr.appendChild(createElement('<div>el</div>'));
insertAdjacentElement
table_new_tr.insertAdjacentElement('beforeend', createElement('<div>el</div>'));
insertAdjacentHTML (remove)
table_new_tr.insertAdjacentHTML('beforeend', '<div>el</div>');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
appendChild
insertAdjacentElement
insertAdjacentHTML (remove)

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Browser/OS: Chrome 102 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
innerHTML	143333.0 Ops/sec
appendChild	163982.5 Ops/sec
insertAdjacentElement	96228.8 Ops/sec
insertAdjacentHTML (remove)	142829.3 Ops/sec

Move Element to another 2 (version: 0)

Comparing performance of: innerHTML vs appendChild vs insertAdjacentElement vs insertAdjacentHTML (remove)

Created: 3 years ago by: Registered User

Jump to the latest result

innerHTML

appendChild

insertAdjacentElement

insertAdjacentHTML (remove)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A