用ID创建一个div，然后修改它

Question

首先，我是 HTML 和 JS 的新手，我的英语不是最好的，对此感到抱歉。

我在 HTML 元素上有一个 ID。 我想使用 function 向此元素添加内容并创建另一个元素（在第一个元素内），使用新 ID，然后使用在第一个元素之后运行的 function 修改最后一个 ID。

我在 HTML 中定义的 id 是“产品容器”

使用 function“show product()”我想创建它的内容并为其图像创建一个 div (id=images-div)，我将使用 function“appendImages()”添加它。

老实说，我不知道如何仅使用 1 个 function 来执行此操作，因为该项目有多个图像，我不知道如何在 innerHTML 中的 for 中迭代它们。 但我认为我应该能够这样做。

我不确定问题是否在于我在创建元素之前定义了变量（让 imagesDiv = document.getElementById("images-div")）...

HTML 代码： <div class="list-group" id="product-container"> </div>

JS代码：

const URL = PRODUCT_INFO_URL + localStorage.getItem("productID") + EXT_TYPE

let productContainer = document.getElementById("product-container")
let imagesDiv = document.getElementById("images-div")
let relatedProducts =document.getElementById("related-products")

let currentProduct = [];

function appendImages(){

    let HTMLContentToAppend = "";

    for (let productImage of product.images){
        HTMLContentToAppend +=`
        <div class="col-3">
            <img src="${productImage}" alt="${product.name}" class="img-thumbnail">
        </div>`
    }

    imagesDiv.innerHTML = HTMLContentToAppend
}

function showProduct(){

    let product = currentProduct

    productContainer.innerHTML = `

        <div class="list-group-item">
            <h1> ${product.name} </h1>
            <hr>
                <div class="col">
                    <div class="justify-content-between">
                        <h4 class="mb-1"> Precio </h4>
                        <p> ${product.currency} ${product.cost}
                    </div>
                    <div class="justify-content-between">
                        <h4 class="mb-1"> Descripción </h4>
                        <p> ${product.description}
                    </div>
                    <div class="justify-content-between">
                        <h4 class="mb-1"> Categoría </h4>
                        <p> ${product.category}
                    </div>
                    <div class="justify-content-between">
                        <h4 class="mb-1"> Cantidad de Vendidos </h4>
                        <p> ${product.soldCount}
                    </div>
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="images-div">
                    </div>
                </div>
        </div>`;

    appendImages()
};

提前感谢您的帮助，并对新问题表示抱歉：/