emptying children: innerHTML vs replaceChildren

Benchmark created on December 24, 2025

Preparation HTML

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
  <li>Nisi ut aliquip ex ea commodo consequat.</li>
  <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</li>
  <li>Eu fugiat nulla pariatur.</li>
  <li>Excepteur sint occaecat cupidatat non proident.</li>
  <li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
  <li>Curabitur pretium tincidunt lacus, nulla gravida orci a odio.</li>
  <li>Nullam varius, turpis et commodo pharetra, est eros bibendum elit.</li>
  <li>Nec luctus magna felis sollicitudin mauris.</li>
  <li>Integer in mauris eu nibh euismod gravida.</li>
  <li>Duis ac tellus et risus vulputate vehicula.</li>
  <li>Donec lobortis risus a elit.</li>
  <li>Etiam tempor, orci eu lobortis elementum, mauris sapien aliquet urna.</li>
  <li>Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo.</li>
  <li>Donec faucibus, libero at sagittis mollis, tellus est malesuada tellus.</li>
  <li>Integer ac leo. Pellentesque ultrices mattis odio.</li>
  <li>Vivamus molestie gravida turpis.</li>
  <li>Fusce lobortis lorem at ipsum semper sagittis.</li>
</ul>

Setup

const container = document.querySelector('ul');

Test runner

container.innerHTML = '';

container.replaceChildren();

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on December 24, 2025