Question

The function simply injects new rows into an empty table when the function is called.

it would seem that since the <td> class gets assigned properly, that the <tr> would also get assigned… but it doesn’t!

var newRow = document.createElement("tr");

for (data in dataArray)
{
    var newName = document.createElement("td"); 

    newName.className = classNames[data];
    newName.innerHTML = dataArray[data];
    newRow.appendChild(newName);
    counter++;
}
document.getElementById("capturedData").appendChild(newRow);
var newRow2 = document.createElement("tr");
newRow2.class = "hiddenRow";

for (data in dataArray)
{
    var newData = document.createElement("td");
    var newDataField = document.createElement("input");

    newDataField.type = "hidden";
    newDataField.name = "name" + data;
    newDataField.value = dataArray[data];

    newData.class = classNames[data];
    newData.value = dataArray[data];

    newData.appendChild(newDataField);      
    newRow2.appendChild(newData);   
}

which is really weird. All the newly added <td> elements have their classes assigned and they show up in the DOM. But the <tr> elements don’t accept the class assignment and in the DOM they have no class.

Why is this? I’ve read about the purported asynchronicity of script execution, but surely this can’t be the case, it would defeat the purpose, no?

Answer 1

DOM elements have no property class, because it is a reserved keyword. You are looking for className:

newRow2.className = "hiddenRow";

Same for the cell (newData). It works for your other cell because you are using className already:

newName.className = classNames[data];