我正在做一个项目，它使用 Bootstrap 来创建各种嵌套组件，这些组件根据 Bootstrap 的类系统进行样式化。我已经使用bootstrap创建了一个我认为成功的card组件，但是当试图使用完全相同的类和布局使用JS和DOM系统克隆这个元素时，附加的card组件具有HTML默认样式，而不是bootstrap的样式。类和嵌套是完全相同的。
我试着一行一行地梳理我的代码，确保布局是完全重复的。下面是一个不是由JS生成的基本HTML代码的示例：

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

以及它制作的卡片的附带图像：
Successful component。
然后，我使用以下JS代码生成元素布局的克隆并将其添加到DOM：
步骤1：将book对象转换为html

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

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

    //card body
    const cardBody = createDiv();
    cardBody.classList.add("card-body");

    //card title
    const cardTitle = createDiv();
    cardTitle.classList.add("card-title");

    //adding title content
    let titleContent = createText(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(createText(book.author));

    cardText.appendChild(authorParagraph);

    let numParagraph = document.createElement("p");
    numParagraph.appendChild(createText(book.pages));

    cardText.appendChild(numParagraph);

    //buttons
    let cButton = document.createElement("button"); //complete or incomplete button
    cButton.classList.add("btn");
    if (book.completed) {
        cButton.classList.add("btn-outline-success");
    } else {
        cButton.classList.add("btn-outline-secondary");
    }
    cardText.appendChild(cButton);

    let rButton = document.createElement("button");
    rButton.classList.add("btn", "btn-outline-danger");
    cardText.appendChild(rButton);

    cardBody.appendChild(cardText);

    card.appendChild(cardBody);

    colDiv.appendChild(card);

    return colDiv;
}

步骤2：更新HTML显示

function updateDisplay() {
    let container = document.querySelector(".bookContainer");
    container.innerHTML = '';
    container.classList.add("row", "bookContainer");
    for (let i = 0; i < library.length; i++) {
        container.appendChild(bookToCard(library[i]));
    }

}

此过程会将以下元素添加到页面中（左侧显示了成功的版本）：
enter image description here。
任何关于如何获得正确的卡有Bootstrap属性的帮助将不胜感激。对不起，代码太乱了。