For loop if statement recognizes == but not < in Javascript

I'm trying to create a script that will replace certain values in my table with other values. I generated a table in HTML that works fine. I want to replace the elements in the 4th column in each of the first 3 rows with the value 1/8".

var rows = document.getElementsByTagName('tr');

for (var i = 0; i < rows.length; i++) {
 var cells = rows[i].getElementsByTagName('td');
 if (i < 3) {
  cells[3].innerHTML = '1/8"';
 }
}

Using the above code does nothing for my table, however using the following code replaces the 4th element with my value

var rows = document.getElementsByTagName('tr');

for (var i = 0; i < rows.length; i++) {
 var cells = rows[i].getElementsByTagName('td');
 if (i == 3) {
 cells[3].innerHTML = '1/8"';
 }
}

Why does == work, but < does not? Are there easy ways to print out the outputs of the for loop so i can debug easier - Im new to coding. Thanks!