Run results for: Move Element to another

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36 Edg/89.0.774.75

Browser: Chrome 89

Operating system: Mac OS X 11.2.3

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
innerHTML += (remove)	122.5 Ops/sec
innerHTML += (display none)	73.3 Ops/sec
appendChild	392550.7 Ops/sec
insertAdjacentElement	325569.8 Ops/sec
insertAdjacentHTML (remove)	109462.7 Ops/sec
insertAdjacentHTML ( display none )	80852.3 Ops/sec

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'

Run results for: Move Element to another

innerHTML += (remove)

innerHTML += (display none)

appendChild

insertAdjacentElement

insertAdjacentHTML (remove)

insertAdjacentHTML ( display none )