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

Question

I am trying to make a single page web app and i have different tabs example is unapproved tab . when i click on this tab i prevent the default using action using js then i get the container element of the page

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

i then insert a table in the container

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>
        `;

once that is done i fetch some data using ajax and insert then into the table body using js.

     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);

    }

But when i try to insert the data i get this error

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

i do not understand why i am getting this error yet i have already inserted the table in the DOM.

below is the whole code

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

You are selecting the #tablebody element before it is in the document. So the result will always be null .

First add the innerHTML content of the container element.

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>
`;

And then select the element from the container using querySelector .

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

Also, prevent using ID's when appending dynamic content and instead use classes. Your page will not work as expected when there is more than one element with the same ID is on the page.

Answer 2

in the example below i have an funtion event that will listen for a button click then depending on the button clicked it will update the location.hash when location.hash is changed i have a funtion somewhere that will load the testdata page which has an empty table inside it and insert the page content in the main.page . this.unapprovedPage(); function will then load some data from the server and feed the table that has now been loaded in the mainpage .

Everything works well but the problem is that when i click the respective button clicked very fast i get the error below or when i click it for the first time but when i click it for the second time all works well and the data is feed into the table

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

How can i ensure that when the button is clicked the data is only feed into the table only once the the testdata page has been loaded?

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);

        }
    }