试图动态插入模板片段

Question

我正在尝试使用从数据库中提取的URL通过后端插入图像，并尝试根据用户单击“更多按钮”时想要查看的费用来动态显示它们。 因此我正在努力理解使用此

show

showMoreBtn.innerText = 'Show More'
                showMoreBtn.addEventListener('click', () => {
                // const img = document.createElement('img')
                // img.src = `uploads/${exp.expFile}`
                // img.src = 'uploads/user2-165015.jpeg'
                console.log('exp File Path', exp.expFile)
                })

的语法和过程。

</template>
    <template id="expList">
        <section class="expSection">
            <h1 id="expID"></h1>
            <h2 id="expLabel"></h2>
            <p><button class="showMoreBtn" ></button></p>
            <!-- <img id="expImage" src="uploads/user2-1650152674035.jpeg" width="400" height="300"> -->
            </section>
    </template>

我是新手的备件， 从数据库作为模板棘手的数据库。任何帮助都将受到赞赏。谢谢

Answer 1

首先，您需要获取部分元素：

const section = document.querySelector(".expSection");

然后将其添加到您的页面中：

section.appendChild(img);