title: Add css style into textnode dynamically
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>Here is my code:</p>
  
  <pre><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);
  }
  </code></pre>
  
  <p>Could someone help me on this? Thanks a lot.</p>