If you look at the childNodes.length of your td element node, you'll see theres 2 or 3 children. The span element being one of them, but there could also be a text node element before and after the span(due to the whitespace from indenting and newlines).
And....various browsers aren't totally consistent here, so you need to be real careful if you traverse the dom like this, because your code will be very brittle.
The reason it works when there's no span is because you end up with a single contiguous text node, so it will be the first child. But, text nodes can't have children, so when you put another type of node in there, the text node might need to be split into two to accommodate the element node.