Question

如何使用 Js 在 HTML BODY 中插入元素，然后使用 Js 选择相同元素并在其中附加更多数据？

2019-12-26

166

javascript dom innerhtml

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

let container = document.getElementById('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>
        `;

完成后，我使用 ajax 获取一些数据，然后使用 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);

    }

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

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

我不明白为什么我会收到此错误，但我已经在 DOM 中插入了表格。

以下是整个代码

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

您正在选择文档中尚未包含的 #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>
`;

然后使用 querySelector 从容器中选择元素。

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

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

Answer 2

在下面的例子中，我有一个函数 event ，它将监听按钮点击，然后根据点击的按钮，它将更新 location.hash ，当 location.hash 发生变化时，我在某处有一个函数，它将加载 testdata 页面，该页面里面有一个空表，并将页面内容插入 main.page 中。 this.unapprovedPage(); 函数将从服务器加载一些数据并将其提供给现在已在 mainpage 中加载的表格。

一切运行良好，但问题是，当我单击相应的按钮时，点击速度非常快，我收到以下错误，或者当我第一次单击它时，但当我第二次单击它时，一切运行良好并且数据被输入到表中

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

如何确保当单击按钮时，只有在 testdata 页面加载后，数据才会输入到表中？

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

        }
    }