innerHTML vs innerText vs nodeValue vs textContent
JavaScript performance comparison
Preparation code
<div id="divinputme" style="position:absolute;left:10px;top:0">x</div>
<span id="spaninputme" style="position:absolute;left:110px;top:0">x</span>
<label id="labelinputme" style="position:absolute;left:210px;top:0">x</label>
<script>
Benchmark.prototype.setup = function() {
var a = document.getElementById('divinputme'),
b = document.getElementById('spaninputme'),
c = document.getElementById('labelinputme');
var s = '1,2,3,4';
a.innerHTML = s;
b.innerHTML = s;
c.innerHTML = s;
var an = a.firstChild,
bn = b.firstChild,
cn = c.firstChild;
var ah = a.offsetHeight,
bh = b.offsetHeight,
ch = c.offsetHeight;
var set_text = function (ep, t) {
ep.textContent = t;
}
var set_text_2 = function (ep, t) {
ep.innerText = t;
}
var set_text_3 = function (ep, t) {
ep.innerHTML = t;
}
var textContentIsBetter = true;
var innerTextIsBetter = true;
var innerHTMLIsBetter = true;
};
</script>
Preparation code output
<div id="divinputme" style="position:absolute;left:10px;top:0">x</div>
<span id="spaninputme" style="position:absolute;left:110px;top:0">x</span>
<label id="labelinputme" style="position:absolute;left:210px;top:0">x</label>
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
Test | Ops/sec | |
---|---|---|
innerText - div
|
|
pending… |
innerText - span
|
|
pending… |
innerText - label
|
|
pending… |
innerHTML - div
|
|
pending… |
innerHTML - span
|
|
pending… |
innerHTML - label
|
|
pending… |
textContent - div
|
|
pending… |
textContent - span
|
|
pending… |
textContent - label
|
|
pending… |
nodeValue - div
|
|
pending… |
nodeValue - span
|
|
pending… |
textContent via function
|
|
pending… |
innerText via function
|
|
pending… |
innerHTML via function
|
|
pending… |
if (for Chrome)
|
|
pending… |
if (for FF)
|
|
pending… |
if (for IE)
|
|
pending… |
Compare results of other browsers
Revisions
You can edit these tests or add even more tests to this page by appending /edit
to the URL.
- Revision 1: published lx
- Revision 4: published David Calhoun
- Revision 7: published Nikolay Frantsev
- Revision 8: published vamp
- Revision 9: published
- Revision 10: published
- Revision 11: published
- Revision 12: published
- Revision 13: published
- Revision 14: published
- Revision 17: published NAIF
- Revision 18: published
- Revision 19: published
- Revision 20: published
- Revision 21: published
- Revision 22: published
- Revision 23: published
- Revision 24: published
- Revision 25: published
- Revision 26: published
- Revision 27: published *andy
- Revision 28: published Ojle Nenpleto
- Revision 29: published
- Revision 31: published
- Revision 32: published
- Revision 33: published
- Revision 34: published
- Revision 35: published
- Revision 36: published
- Revision 37: published
- Revision 38: published
- Revision 39: published mark
- Revision 40: published
- Revision 41: published
- Revision 42: published Sam
- Revision 45: published
- Revision 46: published
- Revision 47: published
- Revision 48: published Peter
- Revision 49: published
- Revision 50: published Andrew
- Revision 52: published Gilles Piou
- Revision 53: published Gilles Piou
0 Comments