中，但由于 searchBtn 默认是 type="submit"，它会立即触发表单提交，导致页面重载，从而清除所有新添加的DOM元素。

解决方案

解决此问题有几种方法，核心思想都是阻止按钮触发表单提交。

方案一：明确指定按钮类型为 type="button" (推荐)

最直接且推荐的方法是，在HTML中明确将按钮的 type 属性设置为 button。这将告诉浏览器，这个按钮仅仅是一个普通的点击按钮，不应触发表单提交行为。

HTML 代码修改：

<form>
    <ul id="uls"></ul>
    <!-- 明确指定type="button" -->
    <button id="searchBtn" type="button">Search</button>
</form>

通过添加 type="button"，searchBtn 将不再具有提交表单的默认行为。此时，你的 click 事件监听器可以正常工作，DOM操作将持久生效，而不会导致页面重载。

火龙果写作

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

277 查看详情

方案二：阻止表单的默认提交行为

如果你希望按钮仍然是 submit 类型（例如，在某些复杂的表单验证场景中），或者你无法修改HTML结构，你可以在表单的 submit 事件监听器中阻止其默认行为。

J*aScript 代码修改：

<form id="myForm">
    <ul id="uls"></ul>
    <button id="searchBtn">Search</button> <!-- 保持默认type="submit" -->
</form>

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

    // 监听表单的submit事件并阻止其默认行为
    myForm.addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单提交和页面重载
        // 可以在这里处理表单数据，或者执行其他逻辑
    });

    searchBtn.addEventListener('click', function () {
        const movieName = document.createElement('LI');
        const text = "works";
        list.append(movieName);
        movieName.innerHTML = text;
        // 这里的DOM操作现在可以正常工作，因为表单提交已被阻止
    });
</script>

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

方案三：移除

<!-- 移除form标签 -->
<ul id="uls"></ul>
<button id="searchBtn">Search</button>

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

    searchBtn.addEventListener('click', function () {
        const movieName = document.createElement('LI');
        const text = "works";
        list.append(movieName);
        movieName.innerHTML = text;
    });
</script>

通过理解和正确应用这些解决方案，你可以有效地管理按钮的默认行为，确保你的J*aScript click 事件监听器能够按预期工作，从而创建更流畅、无刷新的用户体验。