Test name | Executions per second |
---|---|
Vanilla JS .innerText | 1010281.8 Ops/sec |
Vanilla JS .innerHTML | 289108.4 Ops/sec |
Vanilla JS .textContent | 2930783.0 Ops/sec |
Vanilla JS (QuerySelector) .innerText | 867125.6 Ops/sec |
Vanilla JS (QuerySelector) .innerHTML | 272795.0 Ops/sec |
Vanilla JS (QuerySelector) .textContent | 1931450.6 Ops/sec |
Vanilla JS (QuerySelectorAll) .innerText | 1176619.6 Ops/sec |
Vanilla JS (QuerySelectorAll) .innerHTML | 1204405.9 Ops/sec |
Vanilla JS (QuerySelectorAll) .textContent | 1135444.4 Ops/sec |
Cash .text | 1779439.1 Ops/sec |
Cash .html | 265967.5 Ops/sec |
jQuery .text() | 544607.6 Ops/sec |
jQuery .html() | 213687.5 Ops/sec |
jQuery .find() .text() | 368880.2 Ops/sec |
jQuery .find() .html() | 175319.2 Ops/sec |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"><script>
<script>jQuery.noConflict();</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/7.0.3/cash.min.js"></script>
<div id="foo">Hello World</div>
var el = document.getElementById("foo");
el.innerText = "New Hello World";
var el = document.getElementById("foo");
el.innerHTML = "New Hello World";
var el = document.getElementById("foo");
el.textContent = "New Hello World";
var el = document.querySelector("#foo");
el.innerText = "New Hello World";
var el = document.querySelector("#foo");
el.innerHTML = "New Hello World";
var el = document.querySelector("#foo");
el.textContent = "New Hello World";
var el = document.querySelectorAll("#foo");
el.innerText = "New Hello World";
var el = document.querySelectorAll("#foo");
el.innerHTML = "New Hello World";
var el = document.querySelectorAll("#foo");
el.textContent = "New Hello World"
$("#foo").text("New Hello World");
$("#foo").html("New Hello World");
jQuery("#foo").text("New Hello World");
jQuery("#foo").html("New Hello World");
jQuery(document).find("#foo").text("New Hello World");
jQuery(document).find("#foo").html("New Hello World");