Add css style into textnode dynamically - css

Question

I'm having a problem of adding a css style into the auto generated textnode. I know that the textnode does not has any parent node. So I cannot just append the css style in it.
Basically, what I need to do is when user clicks on the "+" button which I create it in the page and it will add a new textnode into one of the . When the user clicks one more time, and it will add another new textnode continually. However, I would like to add a css style after the textnode is created.
Here is my code:
function addRowToTable() {
//find the last row in the table and add the new textnode when user clicks on the button
var tbl = document.getElementById('audioTable2');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
//after find the last row in the table, and it will add the new cell with the new textnode
var cellLeft = row.insertCell(0);
var el_span = document.createElement('span');
var el_spanClass = el_span.setAttribute('class', 'test');
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
}
//this is the css style I would like to apply into the new gerenated textnode
function appendStyle(styles){
var css = document.createElement('style');
css.type='text/css';
if (css.styleSheet) css.styleSheet.cssText = styles;
else css.appendChild(document.createTextNode(styles));
document.getElementsByTagName("head")[0].appendChild(css);
}
Could someone help me on this? Thanks a lot.

Answer 1

You say: "I'm having a problem of adding a css style into the auto generated textnode," but the code you provide shows that you are trying to add a style element to the head for every new textnode. I think what you want is to either 1) apply a style already defined in your style sheet to the textnode, or 2) directly style the textnode inline. Therefore, I think your code should be either:
1) Apply a style in your css stylesheet to the textnode via the span:
//after find the last row in the table, and it will add the new cell with the new textnode
var cellLeft = row.insertCell(0);
var el_span = document.createElement('span');
var el_spanClass = el_span.setAttribute('class', 'test');
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(el_span);
el_span.appendChild(textNode);
}
This puts the span into the cell (which you don't do in your code) which would then wrap the textnode with the span giving it a class of test.
2) Apply a style directly (inline) to the textnode via the span:
//after find the last row in the table, and it will add the new cell with the new textnode
var cellLeft = row.insertCell(0);
var el_span = document.createElement('span');
el_span.setAttribute('style', 'color: red'); /*just an example, your styles set here*/
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(el_span);
el_span.appendChild(textNode);
}
In either case, your appendStyle function could be deleted.