我如何使用 Js 在 HTML BODY 中插入一个元素，然后使用 Js select 相同的元素，然后向其中添加更多数据？

Question

我正在尝试制作一个单页网络应用程序，并且我有不同的选项卡示例是 未批准的选项卡。当我单击此选项卡时，我使用 js 阻止了默认使用操作，然后我获得了页面的容器元素

let container = document.getElementById('container');

我然后在容器

中插入一个table

container.innerHTML = `
        <table id="table" class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody id="tablebody">

            </tbody>
        </table>
        `;

完成后，我使用 ajax 获取一些数据，然后使用 js 插入到 table 正文中。

     try {
        http.get('../includes/unapproved.inc.php')
            .then(res => {
                //check if the response if ok
                console.log(res);
                let rows = '';
                for (let i in res) {
                    rows += ` 
               <tr>
                    <td>${res[i].user_user_id} <td>
               <tr>
               `
                }
                tablebody.innerHTML = rows;
                console.log(table);

            });
    } catch (error) {
        console.log(error);

    }

但是当我尝试插入数据时出现此错误

pages.js:51 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
    at pages.js:51

我不明白为什么会出现此错误，但我已经在 DOM 中插入了 table。

下面是完整的代码

import { FETCH } from "./fetch.js";

export class PAGES {
    constructor() {
        this.unapproved = document.getElementById('unapproved');
    }
    events() {
        this.unapproved.addEventListener('click', (e) => {
            e.preventDefault();
            this.unapprovedPage();

        })
    }
    unapprovedPage() {
        let container = document.getElementById('container');
        let table = document.getElementById('table');
        let tablebody = document.getElementById('tablebody');
        container.innerHTML = `
        <table id="table" class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody id="tablebody">

            </tbody>
        </table>
        `;

        const http = new FETCH;

        try {
            http.get('../includes/unapproved.inc.php')
                .then(res => {
                    //check if the response if ok
                    console.log(res);
                    let rows = '';
                    for (let i in res) {
                        rows += ` 
                   <tr>
                        <td>${res[i].user_user_id} <td>
                   <tr>
                   `
                    }
                    tablebody.innerHTML = rows;
                    console.log(table);

                });
        } catch (error) {
            console.log(error);

        }
    }


}

Answer 1

您正在 select 在 #tablebody 元素出现在文档之前对其进行编辑。所以结果总是 null.

首先添加容器元素的innerHTML内容。

container.innerHTML = `
<table id="table" class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody id="tablebody">

    </tbody>
</table>
`;

然后 select 使用 querySelector 的容器中的元素。

let tablebody = container.querySelector('#tablebody');

此外，在附加动态内容时避免使用 ID，而是使用类。当页面上有多个具有相同 ID 的元素时，您的页面将无法正常工作。

Answer 2

在下面的示例中，我有一个函数 event，它会监听按钮点击，然后根据点击的按钮更新 location.hash 当 location.hash 改变时，我在某个地方有一个函数，它将加载 testdata 页面，其中有一个空的 table 页面并插入页面main.page 中的内容。 this.unapprovedPage(); 函数然后将从服务器加载一些数据并提供 table 现在已经加载到 mainpage.

一切正常，但问题是，当我单击相应按钮时，点击速度非常快，出现以下错误，或者当我第一次单击它时，但当我第二次单击它时，一切正常，并且数据被输入 table

Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at pages.js:47

如何确保单击按钮时仅在 testdata 页面加载后才将数据馈送到 table？

events() {
        this.unapproved.addEventListener('click', (e) => {
            console.log('i have been clicked');
            e.preventDefault();
            location.hash = "testdata";
            this.unapprovedPage();


        })
    }
    unapprovedPage() {
        let table = document.getElementById('table');
        const http = new FETCH;

        try {
            http.get('../includes/unapproved.inc.php')
                .then(res => {
                    //check if the response if ok
                    console.log(res);
                    let rows = '';
                    for (let i in res) {
                        rows += ` 
                   <tr>
                        <th scope="row">1</th>
                        <td>${res[i].user_user_id} </td>
                        <td>${res[i].user_user_id} </td>
                        <td>${res[i].user_user_id} </td>
                        <td>${res[i].user_user_id} </td>
                        <td>${res[i].user_user_id} </td>
                   </tr>
                   `
                    }
                    let tablebody = document.getElementById('tableBody');
                    tablebody.innerHTML = rows;
                    $(document).ready(function() {
                        $('#example').DataTable();
                    } );

                });
        } catch (error) {
            console.log(error);

        }
    }

我如何使用 Js 在 HTML BODY 中插入一个元素，然后使用 Js select 相同的元素，然后向其中添加更多数据？

How can i insert an element in the HTML BODY using Js then select the same element using Js and then append some more data into it?

javascript

dom

innerhtml