Флажки таблицы начальной загрузки javascript не отображаются при вызове функции

Question

Наличие таблицы начальной загрузки JavaScript с одним из th в качестве флажка, записанным в функции и работающим нормально, когда одна и та же функция вызывается при нажатии простой кнопки, флажки не отображаются, вместо этого онибыли заменены пробелами.

<button id="somebutton" onclick="hello()">
    button click
</button>

<div id="div1"></div>

<script>
    hello()

    function hello() {
        var tag = `<div style='margin-left:60px;'><div class='row'><div 
            class='col-md-12' id='main' style='margin-left:210px;max- 
            width:1050px;margin-top:-10px;'>`;

        tag += `<table class='table table-condensed table-striped' id='TestTable 
            data-toggle='table'  data-height='350' data-pagination='true' data- 
            search='true' data-show-columns='true'>`;

        tag += `<thead><tr><th data-checkbox='true'></th><th>Test case ID</th> 
            <th>Testplan</th><th>Expected Result</th><th>Description</th> 
            <th>Procedure</th>`;

        tag += `<th>Precondition</th>Suite Name</th>`;
        tag += `<th>Author</th><th>Automated</th></thead></table>`;

        document.getElementById('div1').innerHTML = tag;
    }
</script>

Ожидалось, что флажки будут видны даже после вызова той же функции после нажатия кнопки, но флажки не будут видны после вызова функции.