DOM, определение стиля элементов

[Maximor17]

Вот такой код:

function addComment() {
    // Отобразить текущее состояние готовности 
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var comArray = xmlHttp.responseText.split("|");
            var name = comArray[0];
            var subject = comArray[1];
            var comment = comArray[2];
            var datetime = comArray[3];
            
            var tr1 = document.createElement("tr");
            var tr2 = document.createElement("tr");
            var tr3 = document.createElement("tr");
            var tr4 = document.createElement("tr");
            
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            
            // ЭТО НЕ РАБОТАЕТ
            td3.className = "comment_text";

            // ТОЖЕ НЕ РАБОТАЕТ
            td3.style.color = "red";
            
            var td4 = document.createElement("td");
                        
            var span1 = document.createElement("span");
            var span2 = document.createElement("span");
            
            span1 = document.createTextNode(name);
            span2 = document.createTextNode(subject);
            
            td1.innerHTML = "Автор: ";
            td2.innerHTML = "Тема:   ";
            
            td1.appendChild(span1);
            td2.appendChild(span2);

            td3 = document.createTextNode(comment);
            td4 = document.createTextNode(datetime);     
            
            var commentsTable = document.getElementById("comments_table");
            
            var tr1Node = commentsTable.appendChild(tr1);
            var tr2Node = commentsTable.appendChild(tr2);
            var tr3Node = commentsTable.appendChild(tr3);
            var tr4Node = commentsTable.appendChild(tr4);
            
            document.getElementById("comment_add_table").style.visibility = "hidden";
            
            tr1Node.appendChild(td1);
            tr2Node.appendChild(td2);
            tr3Node.appendChild(td3);
            tr4Node.appendChild(td4);
            
        } else if (request.status == 404) {
            alert("Requested URL is not found.");
        } else if (request.status == 403) {
            alert("Access denied.");
        }
    }
}

Я написал что в коде не работает, и все таки: не могу никак задать стиль свежесозданным элемнтам. Много пробовал, но ничего не выходит. Странно... хотя я только учу JS, DOM, Ajax. По этому прошу помощи...
Спасибо.

[2de]

Вы что то в коде намудрили, смотрите внимательно:

var td3 = document.createElement("td"); 

// ЭТО НЕ РАБОТАЕТ 
td3.className = "comment_text";
td3.style.color = "red";

td3 = document.createTextNode(comment);

tr3Node.appendChild(td3);

Вы переопределяете td3

Тогда уже хотя бы так напишите
td3.appendChild(document.createTextNode(comment));
или
td3.innerHTML=comment;
вместо
td3 = document.createTextNode(comment);

[Maximor17]

Большое спасибо. Завтыкал маленько, но уже разобрался. Благодарен!

[monolithed]

var tr1 = document.createElement("tr");
tr1Node.appendChild(td1)
var tr1Node = commentsTable.appendChild(tr1);

зачем такое вообще городить? я не спрашиваю знакомы ли вы с ООП, но циклы еще никто не отменял