Appending to an element that doesn't exist

Benchmark created by Ben Everard on

Description

Just satisfying my mind, testing out append() when used correctly and incorrectly to see the performance difference.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="append1" style="display: none;">
</div>
<script>
  $append1 = $('#append1');
  $append2 = $('#append2');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
$('#append1')
$('#append1').append('<p>Hello</p>');
ready
$('#append2')
$('#append2').append('<p>Hello</p>');
ready
$('#append2').length
if ($('#append2').length) {
  $('#append2').append('<p>Hello</p>');
}
ready
$append1
$append1.append('<p>Hello</p>');
ready
$append2
$append2.append('<p>Hello</p>');
ready
$append2.length
if ($append2.length) {
  $append2.append('<p>Hello</p>');
}
ready

Revisions

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

  • Revision 1: published by Ben Everard on