解决JavaScript动态创建元素时Bootstrap样式不生效的常见误区

<div class="row bookContainer">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="card-title">Title Here</div>
                <div class="card-text">
                    <p>By Mr. Ipsum Dolor</p>
                    <p>Pages: 2000</p>
                    <button type="button" class="btn btn-outline-success complete">Completed</button>
                    <button type="button" class="btn btn-outline-danger">Remove</button>
                </div>
            </div>
        </div>
    </div>
</div>

function createText(content) {
    return document.createTextNode(content);
}

function bookToCard(book) {
    // ... (其他元素创建代码保持不变) ...

    // card title
    const cardTitle = createDiv();
    cardTitle.classList.add("card-title");
    let titleContent = createText(book.title); // 假设 book.title 存在
    cardTitle.appendChild(titleContent);
    cardBody.appendChild(cardTitle);

    // card text and content
    const cardText = createDiv();
    cardText.classList.add("card-text");

    // 为作者段落添加文本内容
    let authorParagraph = document.createElement("p");
    authorParagraph.appendChild(document.createTextNode("By ")); // 添加前缀文本节点
    authorParagraph.appendChild(createText(book.author)); // 假设 book.author 存在
    cardText.appendChild(authorParagraph);

    // 为页数段落添加文本内容
    let numParagraph = document.createElement("p");
    numParagraph.appendChild(document.createTextNode("Pages: ")); // 添加前缀文本节点
    numParagraph.appendChild(createText(book.pages)); // 假设 book.pages 存在
    cardText.appendChild(numParagraph);

    // 按钮
    let cButton = document.createElement("button"); // 完成或未完成按钮
    cButton.type = "button"; // 明确指定按钮类型
    cButton.classList.add("btn");
    if (book.completed) {
        cButton.classList.add("btn-outline-success");
        cButton.textContent = "Completed"; // <<<<<< 添加按钮文本
    } else {
        cButton.classList.add("btn-outline-secondary");
        cButton.textContent = "In Progress"; // <<<<<< 添加按钮文本
    }
    cardText.appendChild(cButton);

    let rButton = document.createElement("button");
    rButton.type = "button"; // 明确指定按钮类型
    rButton.classList.add("btn", "btn-outline-danger");
    rButton.textContent = "Remove"; // <<<<<< 添加按钮文本
    cardText.appendChild(rButton);

    cardBody.appendChild(cardText);
    card.appendChild(cardBody);
    colDiv.appendChild(card);

    return colDiv;
}

function updateDisplay() {
    let container = document.querySelector(".bookContainer");
    // 清空现有内容并重新添加类，确保容器结构正确
    container.innerHTML = '';
    // 确保容器始终有 'row' 和 'bookContainer' 类
    container.classList.add("row", "bookContainer");
    for (let i = 0; i < library.length; i++) {
        container.appendChild(bookToCard(library[i]));
    }
}