使用document.getelementbyid从javascript在html文档中创建表

我有一个javascript函数，可以从数据库中提取数据，将其放入html表中，然后通过document.getElementById命令将该表放入html页面。一切正常，除了加载HTML页面时，数据不在表中。我正在使用innerHTML属性将表放在页面上。我的问题是，这是将表填充到HTML页面的有效方法吗？我已经在下面发布了相关代码

<div class="content mt-3">
            <div class="animated fadeIn">
                <div class="row">

                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <strong class="card-title">Data Table</strong>
                        </div>
                        <div class="card-body">
                  <table id="results-data-table" class="table table-striped table-bordered">

               <!-- I am trying to put the html here from javascript

                  </table>

                    </div>
                  </div>
                </div>


                </div>
            </div><!-- .animated -->
        </div><!-- .content -->



    <script src="../controllers/query.js">getData()</script>
    <script src="assets/js/vendor/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/main.js"></script>

Javascript:

function getData() {

var sql = require("mssql");
var dbConfig={
        server:"server",
        database: "db",
        user:"user",
        password: "pw"
}




        var conn = new sql.Connection(dbConfig);
        var req = new sql.Request(conn);
        conn.connect(function (err){
                if (err) {
                console.log(err);
                return;
                }


                req.query("SELECT * FROM table",resultsCallback)

                conn.close();
        });

}

function resultsCallback (err, recordset) {

        var tableify = require('tableify');

        if (err) {
                console.log(err);
        }
        else {

                var html = tableify(recordset);
                html = html.replace('<table>','');
                html = html.replace('</table>','');
                document.getElementById("results-data-table").innerHTML=html;    
        }
};

---

我还不能对帖子发表评论，但我认为你在选择的末尾有一个输入错误：

req.query("SELECT * FROM table,resultsCallback)

应该是：

req.query("SELECT * FROM table",resultsCallback)

---

根据您为去掉html变量中的表标记而编写的语句，该html变量的类型似乎是string。我在您使用的“Tableify”npm模块上运行了一些测试，它的主要方法不以DOM节点的形式返回元素。因此，不能只使用字符串形式的.innerHTML注入元素。这主要是因为DOM希望您设置为innerHTML的对象不会是其他DOM节点。JS希望您使用appendChild或其他方法将节点作为其他DOM节点的子节点插入

做下面几行应该会得到你想要的。首先，不要像现在这样去掉table标记，否则节点将变得无效。然后在html变量上运行CreateContexturalFragment。结果将是一个文档片段，然后您可以在其上运行querySelector来检索第一个元素，通常是tbody元素，最后将该元素的子元素追加到您已经存在的表中。。。比如说

//从字符串创建DOM片段 var frag=document.createRange.createContextalFragmentHTML； //从表内部获取第一个元素。这通常是一个tbody，但您可能需要确保Tableify正在您的中生成一个tbody。 var tableBody=frag.querySelector'tbody'； //将该节点附加到表DOM元素

---

document.querySelectorresults-data-table.appendChildtableBody；如果它实现了您的目标，那么它是有效的。那么为什么它不向表中显示任何数据呢@谢谢你。这一行是在我编辑代码中的信息以发布它时编辑的。它在实际功能中是功能性的。没问题！刚刚删除了最后一条评论，因为我问错了。那凹痕快把我逼疯了！