javascript - How to add colspan and text in cell? -

i'm getting error when insert row , cell, add text (innerhtml, textcontent) , colspan. error reads:

safari:

"typeerror: attempted assign readonly property."

chrome:

"uncaught typeerror: cannot assign read property"

if remove text, colspan work , other cells show; if remove colspan, text show. if try keep both, apart getting error, other cells exist disappear, , colspan won't work.

example html:

<table id ="my_table">                     <thead>                         <tr>                             <th>text</th>                             <th>text</th>                             <th>text</th>                             <th>text</th>                             <th>text</th>                         </tr> 

example js:

function test3() {      //get table id;     var table = document.getelementbyid('my_table');      //create row, cell     var my_row = table.insertrow(-1);     var total = my_row.insertcell(0).textcontent = "my colspan text"; 

...or

var total = my_row.insertcell(0).innerhtml = "my colspan text"; 

...then

    total.colspan = "4"; } 

when searched problem, read exists in ios8 , occurs when use in strict mode; however, if remove "use strict", error message disappear, problem persist. it's webkit bug, same thing happens in firefox, minus error message.

possibly related link: typeerror: attempted assign readonly property. on ios8 safari

am doing wrong or there workaround?

addendum: sub-optimization add second cell has no text inserted, , give colspan.

my_row.insertcell(0).textcontent = "my colspan text" doesn't return cell, returns string assigned textcontent

       function test3() {             //get table id;           var table = document.getelementbyid('my_table');             //create row           var my_row = table.insertrow(-1);           //create cell           var total = my_row.insertcell(0);            //set properties           total.textcontent = "my colspan text";           total.colspan = 4;         }  window.addeventlistener('load', test3, false);

<table id="my_table" border="1">    <thead>      <tr>        <th>text</th>        <th>text</th>        <th>text</th>        <th>text</th>        <th>text</th>      </tr>    </thead>  </table>