问题根源：HTML按钮的默认行为

问题的核心在于HTML 元素在

标签内部的默认 type 属性。根据HTML规范，如果

元素未明确指定 type 属性，并且它位于 元素内部，则其默认类型为 submit。这意味着，当用户点击这样的按钮时，浏览器会将其视为提交表单的动作，从而触发页面的默认表单提交行为，导致页面重载。即使我们通过J*aScript动态添加了内容，页面重载也会清除这些临时性的DOM修改。

考虑以下示例代码，它试图在点击按钮时向列表中添加一个新项：

<form id="myForm">
    <button id="searchBtn">搜索</button>
</form>
<ul id="uls">
    <!-- 动态添加的列表项将显示在这里 -->
</ul>

<script>
    const searchBtn = document.querySelector('#searchBtn');
    const list = document.querySelector('#uls');

    searchBtn.addEventListener('click', function () {
        const movieName = document.createElement('LI');
        const text = "新项目";
        list.append(movieName);
        movieName.innerHTML = text;
        // 期望：点击后添加“新项目”到列表
        // 实际：项目短暂出现后页面重载，项目消失
    });
</script>

在这段代码中，当点击 searchBtn 时，虽然J*aScript代码会执行并创建

解决方案

要解决这个问题，我们需要阻止按钮的默认表单提交行为。有几种方法可以实现这一点：

1. 明确设置按钮类型为 type="button"

这是最直接和推荐的解决方案。通过在HTML中为 元素添加 type="button" 属性，可以明确告知浏览器该按钮不用于提交表单，而仅仅是一个普通的点击按钮。

<form id="myForm">
    <button id="searchBtn" type="button">搜索</button>
</form>
<ul id="uls">
    <!-- 动态添加的列表项将显示在这里 -->
</ul>

<script>
    const searchBtn = document.querySelector('#searchBtn');
    const list = document.querySelector('#uls');

    searchBtn.addEventListener('click', function () {
        const movieName = document.createElement('LI');
        const text = "新项目";
        list.append(movieName);
        movieName.innerHTML = text;
        // 结果：点击后“新项目”成功添加到列表，页面不重载
    });
</script>

通过添加 type="button"，按钮将不再触发表单提交，click 事件监听器可以正常工作。

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

2. 阻止表单的默认提交行为

如果出于某种原因，按钮必须保留在表单内且不希望改变其 type 属性（例如，希望它在某些情况下依然能够提交表单，但在另一些情况下仅执行J*aScript逻辑），或者你希望完全通过J*aScript控制表单提交，那么可以在表单的 submit 事件监听器中调用 event.preventDefault()。

<form id="myForm">
    <button id="searchBtn">搜索</button>
</form>
<ul id="uls">
    <!-- 动态添加的列表项将显示在这里 -->
</ul>

<script>
    const myForm = document.querySelector('#myForm');
    const searchBtn = document.querySelector('#searchBtn');
    const list = document.querySelector('#uls');

    // 监听表单的submit事件并阻止其默认行为
    myForm.addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单的默认提交行为
        console.log("表单提交被阻止。");
        // 如果需要，可以在这里处理表单数据或手动触发Ajax提交
    });

    searchBtn.addEventListener('click', function () {
        const movieName = document.createElement('LI');
        const text = "新项目";
        list.append(movieName);
        movieName.innerHTML = text;
        // 结果：点击后“新项目”成功添加到列表，页面不重载
    });
&lt;/script>

这种方法适用于你希望通过J*aScript完全控制表单提交流程的场景，例如使用AJAX进行数据提交。

3. 将按钮移出表单

如果按钮的功能与表单提交无关，或者你不需要它与任何表单关联，最简单的方法就是将其从

<form id="myForm">
    <!-- 表单内的其他元素 -->
</form>
<button id="searchBtn">搜索</button> <!-- 按钮现在在表单外部 -->
<ul id="uls">
    <!-- 动态添加的列表项将显示在这里 -->
</ul>

<script>
    const searchBtn = document.querySelector('#searchBtn');
    const list = document.querySelector('#uls');

    searchBtn.addEventListener('click', function () {
        const movieName = document.createElement('LI');
        const text = "新项目";
        list.append(movieName);
        movieName.innerHTML = text;
        // 结果：点击后“新项目”成功添加到列表，页面不重载
    });
</script>