JavaScript动态创建Bootstrap元素：解决样式未生效的视觉假象

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

    // 按钮部分 - 缺少文本内容
    let cButton = document.createElement("button"); // 完成/未完成按钮
    cButton.classList.add("btn");
    if (book.completed) {
        cButton.classList.add("btn-outline-success");
    } else {
        cButton.classList.add("btn-outline-secondary");
    }
    // 注意：此处缺少 cButton.textContent = "Some Text";

    let rButton = document.createElement("button"); // 移除按钮
    rButton.classList.add("btn", "btn-outline-danger");
    // 注意：此处缺少 rButton.textContent = "Remove";

    // 段落部分 - 文本内容可能未正确构造
    let authorParagraph = document.createElement("p");
    // 假设 createText 返回一个文本节点，但如果拼接方式不当，可能导致内容不全
    authorParagraph.appendChild(createText(book.author)); // 例如，可能忘记添加前缀“By ”

    // ... 其他元素追加代码 ...

    return colDiv;
}

function bookToCard(book) {
    // col div
    const colDiv = document.createElement("div");
    colDiv.classList.add("col-md-4");

    // card div
    const card = document.createElement("div");
    card.classList.add("card");

    // card body
    const cardBody = document.createElement("div");
    cardBody.classList.add("card-body");

    // card title
    const cardTitle = document.createElement("div");
    cardTitle.classList.add("card-title");
    cardTitle.textContent = book.title; // 直接设置标题文本
    cardBody.appendChild(cardTitle);

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

    // 作者段落
    let authorParagraph = document.createElement("p");
    authorParagraph.textContent = `By ${book.author}`; // 使用模板字符串更清晰地设置文本
    cardText.appendChild(authorParagraph);

    // 页数段落
    let numParagraph = document.createElement("p");
    numParagraph.textContent = `Pages: ${book.pages}`; // 设置页数文本
    cardText.appendChild(numParagraph);

    // 按钮部分 - 添加文本内容
    let cButton = document.createElement("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.classList.add("btn", "btn-outline-danger");
    rButton.textContent = "Remove"; // <<<<<<< 添加文本内容
    cardText.appendChild(rButton);

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

    return colDiv;
}