Mounted() & css class weird behavior, please advice

Hi, as I need to dynamically create my HTML Table, so I defined a function at the template page,

displayItemRow(item) {
          var table = document.getElementById("product-cart").getElementsByTagName('tbody')[0];
          var row = table.insertRow(-1);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          var cell3 = row.insertCell(2);
          var cell4 = row.insertCell(3);

          var _tempTotal = item.qty * item.price;
          cell1.innerHTML = '<td class="checkbox-cell">'+
                              '<label class="checkbox">'+
                                '<input type="checkbox">'+
                                '<i class="icon-checkbox"></i>'+
          cell2.innerHTML = '<td class="label-cell">''</td>';
          cell3.innerHTML = '<td class="numeric-cell tablet-only">'+item.price.toFixed(2)+'</td>';
          cell4.innerHTML = '<td class="numeric-cell tablet-only">'+ 
                   _tempTotal.toFixed(2).toString() +'<div></td>';


and i made a call to this function at my mounted() {…}
as follow ,

var items = window.cart_data;
var item = [];
for ( item in items ){
//      console.log(items[item]);
    if (items[item] !== null) {
      self.displayItemRow( items[item] );

and the table get created properly, but i noticed one strange behavior, that is
if you check my code, in my innerHTML , i put the HTML content with css style
class , i.e. <td class="label-cell"> but when it get created , it only
came out with <td> and my css Style Class gone. only left class which
are “checkbox” or “icon-checkbox” , the rest is like has been striped and left
only standard HTML tag.

Appreciate any input and advice.

Got it ! , it can be set using className of the element when i create it.