为什么网页中创建的元素生成后立即消失？

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

点击Create按钮（submit类型）时，表单会触发默认提交行为，浏览器随即刷新页面，刚创建的元素会随着页面刷新被清除，所以看起来元素刚出现就消失了。

次要问题：标签名大小写错误 #

下拉选择框的value是Div/Section（首字母大写），但document.createElement()需要传入小写的HTML标准标签名（如div/section），否则创建的是自定义元素，而非标准的div或section标签。

修正后的代码 #

HTML（保持原结构即可）

<!DOCTYPE html>
<html>
<head lang="de">
  <title>Kontaktlistenbeispiel</title>
  <link rel="stylesheet" href="mainWeek12Challenge6.css" >
</head>
<body>
  <form action="">
    <input type="number" name="elements" class="input" placeholder="Number Of Elements" />
    <input type="text" name="texts" class="input" placeholder="Elements Text" />
    <select name="type" class="input">
      <option value="Div">Div</option>
      <option value="Section">Section</option>
    </select>
    <input type="submit" name="create" value="Create" />
    <div class="results"></div>
  </form>

  <script src="main6.js"></script>
</body>
</html>

修改后的JS代码

const formEl = document.querySelector('form');
const numberInputEl = document.querySelector('input[type="number"]');
const textInputEl = document.querySelector('input[type="text"]');
const resultSection = document.querySelector('.results');
const selectionEle = document.querySelector('select');

formEl.addEventListener('submit', constructElements);

function constructElements(event) {
    // 阻止表单默认提交行为，避免页面刷新
    event.preventDefault();

    // 验证输入有效性
    const count = parseInt(numberInputEl.value);
    if (isNaN(count) || count < 1) {
        alert('请输入有效的正整数');
        return;
    }
    const text = textInputEl.value.trim();
    if (!text) {
        alert('请输入元素文本');
        return;
    }

    // 将选择的标签名转为小写，匹配HTML标准标签
    const tagName = selectionEle.value.toLowerCase();
    const containerEl = document.createElement(tagName);
    containerEl.style.cssText = "display: flex; justify-content: center; gap:10px;";

    let i = 0;
    while(i < count) {
        const currDiv = document.createElement('div');
        currDiv.className = 'newDiv';
        currDiv.textContent = text;
        containerEl.appendChild(currDiv);
        i++;
    }

    resultSection.appendChild(containerEl);
}

关键修改点说明 #

• event.preventDefault()：彻底阻止表单提交的默认刷新行为，让创建的元素保留在页面上。
• 标签名转小写：selectionEle.value.toLowerCase()，确保创建的是标准HTML元素。
• 输入验证：避免用户输入无效值时代码无反应，提升交互体验。

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