Read innerHTML vs innerText vs nodeValue vs textContent
JavaScript performance comparison
Preparation code
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="div">1,2,3,4<span id="span">1,2,3,4</span></div>
<span id="span">1,2,3,4<span id="span">1,2,3,4</span></span>
<script>
jQuery.noConflict();
var a = document.getElementById('div'),
b = document.getElementById('span'),
$a = jQuery('div'),
$b = jQuery('span'),
$$a = $$('div'),
$$b = $$('span'),
s;
</script>
Preparation code output
1,2,3,41,2,3,4
1,2,3,41,2,3,4
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… |
innerHTML - div |
|
pending… |
innerHTML - span |
|
pending… |
nodeValue - div |
|
pending… |
nodeValue - span |
|
pending… |
textContent - div |
|
pending… |
textContent - span |
|
pending… |
jQuery text - div |
|
pending… |
jQuery text - span |
|
pending… |
jQuery html - div |
|
pending… |
jQuery html - span |
|
pending… |
MooTools text - div |
|
pending… |
MooTools text - span |
|
pending… |
MooTools html - div |
|
pending… |
MooTools html - span |
|
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. Here’s a list of current revisions for this page:
- Revision 1: published by Rob
- Revision 2: published by Rob
- Revision 3: published by Rob
- Revision 5: published
- Revision 6: published
- Revision 7: published by CoolCmd
- Revision 8: published by CoolCmd
- Revision 9: published by Allan
- Revision 10: published by pikappa
0 comments