Benchmark: innerText vs replace

HTML Preparation code:

<div id="parent">
    <div id="container"></div>
</div>

Script Preparation code:

var parent = document.getElementById("parent");
var container = document.getElementById("container");
var text = "This will be the text in container.";

Tests:

innerText
container.innerText = text;
replaceWith
var newContainer = document.createElement("div"); newContainer.id = "new-container"; newContainer.innerText = text; container.replaceWith(newContainer);
replaceChild
var newContainer = document.createElement("div"); newContainer.id = "new-container"; newContainer.innerText = text; parent.replaceChild(newContainer, container);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
replaceWith
replaceChild

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

innerText vs replace (version: 0)

Comparing performance of: innerText vs replaceWith vs replaceChild

Created: 6 years ago by: Guest

Jump to the latest result

innerText

replaceWith

replaceChild

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

No previous run results