If don't respect even if the inner value it is false

This is my HTML code:

$(function() {
  function reverse(s) {
    return s.split("").reverse().join("");
  }

  $('button').click(function() {
    var span = $(this).siblings('span');
    span.text(function() {
      var reversed = reverse($(this).text());
      return reversed;
    });

    if (!span.children('small').length) {
      span.wrapInner('<small></small>');
      console.log(!span.children('small').length);
    }
  });
});

<script src="http://ift.tt/1g1yFpr"></script>
<span>reverse1</span>
<span>reverse2</span>
<button>reverse me</button>

I put a console.log into the if statement to add a small only once in the DOM (not sure about wrapInner function) the check if the small node is added only once. I checked the value in the logical expression is true where there is no small tag and false when it's added. Can anyone help me to understand?