javascript - 使用 javascript 函数在 <div> 内渲染 HTML 表格

Question

我正在尝试让我的 javascript 函数在我的网站上的内容 div 中创建一个 html 表。问题是，它不是显示在 div 内部而是显示在其下方。我怎样才能把它放进去？

<div id="tab-container" class='tab-container'>
    <ul class='etabs'>
        <li class='tab'><a href="#tabs1-start">Start</a></li>
        <li class='tab'><a href="#tabs1-schicht">Schichtplan</a></li>
        <li class='tab'><a href="#tabs1-rechnung">Rechnung</a></li>
        <li class='tab'><a href="#tabs1-kontakt">Kontakt</a></li>
    </ul>
    <div class='panel-container'>
        <div id="tabs1-start">
            Test page 1
        </div>
        <div id="tabs1-schicht">
            <script type"text/javascript">
                tableCreate();
            </script>
        </div>
        <div id="tabs1-rechnung">
            Test page3

        </div>
        <div id="tabs1-kontakt">
            Test page4
        </div>
    </div>
</div>

这是我带有导航栏的基本网站。当我使用 xampp 运行它时，js 函数 tableCreate();面板容器 div 关闭后显示。

这是我的js代码:

function tableCreate(){
//var schicht=["datum","schicht","schicht","schicht","dispo","schicht","schicht","schicht","schicht","schicht","schicht","dispo"];
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='100%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<28;i++){
    var tr=document.createElement('tr');
    for(var j=0;j<12;j++){
        if(i==27 && j==12){
                break   
                 } else {
        var td=document.createElement('td');
        td.appendChild(document.createTextNode('schicht'))
        tr.appendChild(td)
        }
    }
    tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)

提前致谢。

Answer 1

使用 document.getElementById('tabs1-schicht'); 而不是 document.getElementsByTagName('body')[0];