点击按钮时根据用户输入向HTML已定义div中追加div的代码问题排查

我一眼就发现问题所在啦——你的按钮是submit类型，点击后表单会默认提交并刷新页面，这就导致你刚创建的div还没显示就被页面刷新冲掉了！另外你的HTML还有标签闭合错误，也可能影响DOM结构。下面一步步给你解决：

核心问题1：表单提交导致页面刷新 #

当你点击<button type="submit">时，浏览器会自动触发表单提交并刷新页面，所以你的JavaScript代码其实已经执行了，但页面一刷新，新添加的div就直接消失了，看起来像是没创建成功。解决这个有两种简单办法：

方法A：阻止表单默认提交行为 #

修改你的myfunc函数，加上event.preventDefault()来拦截默认的表单提交动作：

var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);
function myfunc(event) { // 接收事件参数
    event.preventDefault(); // 阻止表单提交刷新页面
    // 用const/let声明变量，避免全局变量污染
    const number = document.querySelector("#number").value;
    const split = document.querySelector("#split").value;
    // 加个判断，避免除数为0报错
    if (split <= 0) {
        alert("Split number must be greater than 0!");
        return;
    }
    const totalDivs = Math.floor(number / split);
    const displayDiv = document.getElementById("disp");
    // 可选：清空之前的div，避免多次点击累加
    displayDiv.innerHTML = "";
    for (let i = 0; i < totalDivs; i++) {
        const tag = document.createElement("div");
        // 给div加样式，不然空div看不到效果
        tag.style.width = "60px";
        tag.style.height = "60px";
        tag.style.backgroundColor = "#e2e2e2";
        tag.style.margin = "8px";
        tag.style.display = "inline-block";
        tag.textContent = `Div ${i+1}`; // 加内容方便区分
        displayDiv.appendChild(tag);
    }
}

方法B：修改按钮类型为button #

直接修改HTML里的按钮，把type="submit"改成type="button"，这样点击按钮就不会触发表单提交了：

<button type="button" class="btn btn-primary my-2">Split</button>

核心问题2：HTML标签闭合错误 #

你的HTML末尾多了一对</form>和</div>，这会导致DOM结构异常，修复后的完整HTML应该是这样：

<div class="container my-5">
    <form>
        <div class="form-group p-2">
            <label for="number" class="num">Enter a Number</label>
            <input type="number" class="form-control" id="number" />
        </div>
        <div class="form-group p-2">
            <label for="split" class="num">Enter number of times you want to split</label>
            <input type="number" class="form-control" id="split" />
        </div>
        <button type="button" class="btn btn-primary my-2">Split</button>
    </form>
    <div id="disp"></div>
</div>

额外小提示 #

• 给新创建的div加样式很重要：默认空div没有宽高和背景，你可能会误以为没创建成功，加个样式就能直观看到效果。
• 可以添加输入校验：比如判断输入的数字是否有效、split不能为0，避免出现意外报错。

内容的提问来源于stack exchange，提问作者Franky11