jQuery -- .html() vs. .text() vs. innerHTML vs. innerText/textContent (v23)

Revision 23 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="test-element">
</div>
<div class="test-element">
</div>
<div class="test-element">
</div>
<div class="test-element">
</div>
<div class="test-element">
</div>

Setup

var plainText = '<label>one & two</label>',
      encodedText = $('<div></div>').text(plainText).html();
  
  $('.test-element').empty();
  
  var $els = $('.test-element');
  $els.html("test");

Teardown



            $('.test-element').empty();
  $('.test-element').html("test");

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery .html()
$els.html(encodedText);
ready
jQuery .text()
$els.text(plainText);
ready
toggle
$els.toggle()
ready

Revisions

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