JQuery if() vs :contains

Comparing the performance of a Javascript if-Statement vs. the jQuery contains selector.

HTML

<div class="shipping"><span class="price">FREE</span></div>
<div id="result">running...</div>

JavaScript

jQuery(function($){
  var n = 100000;

  var t1 = new Date();

  for(var i = 0; i < n; i++) {
   $('.shipping .price:contains("FREE")').addClass('text-primary');
  }

  var t2 = new Date();

  for(var i = 0; i < n; i++) {
    if ($('.shipping .price').text() === "FREE"){ 
      $('.shipping .price').addClass('text-primary'); 
    }
  }

  var t3 = new Date();

  for(var i = 0; i < n; i++) {
    var elem = $('.shipping .price');
    if (elem.text() === "FREE"){ 
      elem.addClass('text-primary'); 
    }
  }

  var t4 = new Date();

  for(var i = 0; i < n; i++) {
    var elem = document.querySelector('.shipping .price');
    if (elem.firstChild.nodeValue === "FREE"){ 
      elem.classList.add('text-primary'); 
    }
  }

  var t5 = new Date();

  $('#result').html("<ul><li><code>contains</code>-Selector: " + (t2-t1) + "</li><li><code>if</code>-Statement: " + (t3-t2) + "</li><li>With caching: " + (t4-t3) + "</li><li>Vanilla JS: " + (t5-t4)+ "</li></ul>");
});