Append or Absolute

Benchmark created by Mike Murry on October 4, 2011

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style>
#card { position:absolute; }
.column { float:left; width:200px; }
</style>

<div id="column0" class="column"></div>
<div id="column1" class="column"></div>
<div id="column2" class="column"></div>
<div id="card"><p>Hello World.</p></div>
<script>
  var position = 0;
  var colPos = [$("#column0").offset(), $("#column1").offset(), $("#column2").offset()];
  var card = $("#card");
  
  function newPosition() {
  position++;
  if (position>2) { position = 0; }
  }
</script>

Test runner

newPosition();
$(card).css({"left":colPos[position].left, "top":colPos[position].top});

newPosition();
$("#column" + position).append($(card));

Revisions

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

• Revision 1: published by Mike Murry on October 4, 2011