Astro：将 JS 变量传递给 HTML 会破坏结构

问：

我正在尝试使用 Astro 创建一个简单的网站，但遇到了这个问题。每当我尝试将 JS 变量 countryCode 传递给 HTML 时，结构都会中断。最后一个容器被移动到它之前的容器中 - https://ibb.co/KjKFbbH

---
import MainLayout from "../layouts/MainLayout.astro";

const countryCode = 'DE';

var ibanValid = true;
---

<MainLayout title="IBAN Validator" description="IBAN Validator and Parser">
    <div class="container-wrapper">
        <div class="container">
            <div class="container-header">
                <h1>IBAN Validator</h1>
            </div>
            <div class="container-body">
                <p class="text-center">
                    To check whether an IBAN is correct, please enter it here:
                </p>
                <input type="text" name="ibanInput" placeholder="..." />
                <input type="button" value="VALIDATE IBAN" />
            </div>
            <div class="container-footer">
                <p
                    class:list={[
                        "result",
                        { green: ibanValid },
                    ]}
                >
                    The IBAN is invalid!
                </p>
            </div>
        </div>
        <div class="container">
            <div class="container-header">
                <h1>Bank Details</h1>
            </div>
            <div class="container-body">
                <table>
                    <tr>
                        <td>Country Name</td>
                        <td>Germany</td>
                    </tr>
                    <tr>
                        <td>Country Code</td>
                        <td>{countryCode}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="container">
            <div class="container-header">
                <h1>Verification</h1>
            </div>
            <div class="container-body">
                <table>
                    <tr>
                        <td>IBAN Length</td>
                        <td>true</td>
                    </tr>
                    <tr>
                        <td>ISO 7064 MOD-97-10</td>
                        <td>true</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</MainLayout>

如果我手动键入值，则所有内容都会正确显示。 知道为什么会这样吗？

谢谢。