Cannot access dynamically created span using GetElementsByName?

Question

I have a situation dealing with some legacy code, and it seems what used to work isn't working any longer. I have two code block fragments, that by all appearances should be identical in functioning, but the first one can be found using getElementsByName:

function myFunction() {
    var table = document.getElementById("myTable");
    var row = document.createElement("tr");
    var td = document.createElement("td");
    td.innerHTML = '<span id="mySpan" name="mySpan">My New Span</span>';
    row.appendChild(td);
    table.appendChild(row);
}

This second one cannot be found using getElementsByName:

function myOtherFunction() {
    var table = document.getElementById("myTable");
    var row = document.createElement("tr");
    var td = document.createElement("td");
    var span = document.createElement("span");
    span.id = 'mySpan2';
    span.name = 'mySpan2';
    span.innerHTML = 'My New Span';
    td.appendChild(span);
    row.appendChild(td);
    table.appendChild(row);
}

If I then run the following code,

function findIt() {
    var mySpan = document.getElementsByName('mySpan')[0];
    var mySpan2 = document.getElementsByName('mySpan2')[0];
}

then mySpan will point correctly to the element I need to access, but mySpan2 won't.

Can someone please tell me what I'm missing? Thanks!