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.