无法将数组数据加载到网页表格，求代码排查与调试方法

代码错误点 #

1. DOM元素添加语法错误：addBookToList方法中，list.appendChild.row是错误写法，正确的应该是调用appendChild方法并传入创建好的row元素，即list.appendChild(row)。
2. HTML标签不完整与无效属性：row.innerHTML中的<a>标签未闭合，且delete是无效属性，应改为data-delete自定义属性，同时闭合<a>标签。

修正后的JavaScript代码 #

class UI{
    static displayBooks(){
        const storedBooks =[
        {
            title : 'matrix',
            author : 'john doe',
            isbn : '45565'
        },
        {
            title : 'book-two',
            author : 'john toe',
            isbn : '45566'
        }
    ];
        // 打印storedBooks数组到控制台
        console.log(storedBooks);
        const books = storedBooks;
        books.forEach((book) => UI.addBookToList(book));
    }

    static addBookToList(book){
        const list = document.getElementById('book-list');
        const row = document.createElement('tr');
        row.innerHTML =`
        <td>${book.title}</td>
        <td>${book.author}</td>
        <td>${book.isbn}</td>
        <td><a href="#" class="btn btn-danger btn-sm" data-delete>x</a></td>`;
        list.appendChild(row);
    }
    
}

// Display Books
document.addEventListener('DOMContentLoaded',UI.displayBooks);

控制台打印storedBooks数组的方法 #

在displayBooks方法内部，直接添加console.log(storedBooks)语句即可，如上面修正后的代码所示。打开浏览器开发者工具（按F12），切换到Console标签页，页面加载后就能看到打印出的数组内容。

内容的提问来源于stack exchange，提问作者Arun Agasti