尝试使用 DOM 操作 (JavaScript) 显示文本时，appendChild 为 null

Question

我试图让这段代码向我展示我在网站末尾添加的书，但它一直向我显示一个错误，即 appendChild(collection) 为空。有人可以解释为什么会这样吗？我读了类似的问题，认为这与将放在页面末尾有关，但这也没有用。

//library data structure
let myLibrary = [];

//book data structure
class Book {
    constructor(Title, Author, Pages, Read) {
        this.Title = Title;
        this.Author = Author;
        this.Pages = Pages;
        this.Read = Read;
    }
}

//add book to library
function addBookToLibrary(Title, Author, Pages, Read){
    let book = new Book(Title, Author, Pages, Read);
    myLibrary.push(book);
}

function displayBooks (){
    myLibrary.forEach(myLibrary => {
        const library = document.querySelector('library-container');
        const collection = document.createElement('div');
        collection.classList.add('library');
        console.log(collection);
        const card = document.createElement('div');
        card.classList.add("card");
     
        for(let key in myLibrary){
            console.log(`${key}: ${myLibrary[key]}`);
            const text = document.createElement("p");
            text.textContent = (`${key}: ${myLibrary[key]}`);
            card.appendChild(text);
            collection.appendChild(card);
            library.appendChild(collection);

            console.log(library);

        
        }
    })
}

addBookToLibrary("Atomic Habits", "James Clear", "295 Pages", "Not Read");
displayBooks();

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Library</title>
</head>
<body>
    <h1>Library</h1>
    <div class="library-container"></div>
</body>
</html>
<script src="index.js"></script>

Answer 1

问题源于 displayBooks 中 .querySelector 的选择器错误：

const library = document.querySelector('library-container');

因此，您的 library 常量包含一个 null 值，您不能在 null 上调用 .appendChild。

'library-container' 不是有效的选择器，因为 HTML 没有定义 <library-container> 元素。如果您的元素有 ID，请使用：

const library = document.querySelector('#library-container');

如果有class，使用：

const library = document.querySelector('.library-container');

您可以在此处阅读有关有效选择器的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

尝试使用 DOM 操作 (JavaScript) 显示文本时，appendChild 为 null

appendChild is null when trying to display text with DOM manipulation (JavaScript)

html

javascript