如何通过onsubmit函数显示DOM元素？贺卡表单提交生成卡片求助

问题说明 #

我用Javascript和CSS制作支持用户输入的贺卡，需要将表单提交的信息生成下方的卡片。CSS已配置完成，问题不在样式部分。写完大部分JS基础代码，但提交后无法显示生成的DOM元素。

现有代码中的错误 #

1. 创建cardContainer后，document.body.appendChild('cardContainer');传递的是字符串而非变量，应该改为document.body.appendChild(cardContainer);
2. 重复将form添加到body：代码中先后两次执行document.body.appendChild(form);，属于冗余操作
3. 最后一行document.body.appendChild(div);中的div未定义，会导致报错
4. 提交事件处理函数仅获取容器元素并返回未定义的div，既未阻止表单默认提交行为，也未根据用户输入生成并添加贺卡元素

修正后的完整代码 #

// 创建表单元素
let form = document.createElement('form');
form.setAttribute('id','card-form');

// 姓名输入框
let nameInput = document.createElement('input');
nameInput.setAttribute('type','text');
nameInput.setAttribute('id','name-input');
nameInput.setAttribute('placeholder','Your Name');
nameInput.required = true;
form.appendChild(nameInput);

// 消息文本框
let messageTextArea = document.createElement('textarea');
messageTextArea.setAttribute('id','message-input');
messageTextArea.setAttribute('placeholder','Your Message');
messageTextArea.required = true;
form.appendChild(messageTextArea);

// 图片URL输入框
let imageInput = document.createElement('input');
imageInput.setAttribute('type','url');
imageInput.setAttribute('id','url-input');
imageInput.setAttribute('placeholder','Image or GIF URL');
imageInput.required = true;
form.appendChild(imageInput);

// 提交按钮
let submitButton = document.createElement('button');
submitButton.setAttribute('type','submit');
submitButton.innerText = 'Finish';
form.appendChild(submitButton);

// 创建卡片容器
let cardContainer = document.createElement('div');
cardContainer.setAttribute('id','card-container');

// 把表单和容器添加到页面
document.body.appendChild(form);
document.body.appendChild(cardContainer);

// 表单提交事件处理
document.getElementById('card-form').addEventListener('submit', function (e) {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    // 获取用户输入的值
    let userName = document.getElementById('name-input').value;
    let userMessage = document.getElementById('message-input').value;
    let userImageUrl = document.getElementById('url-input').value;
    
    // 创建贺卡主容器
    let card = document.createElement('div');
    card.classList.add('card'); // 关联你已配置好的CSS类
    
    // 创建图片元素
    let cardImage = document.createElement('img');
    cardImage.src = userImageUrl;
    cardImage.alt = '贺卡配图';
    card.appendChild(cardImage);
    
    // 创建姓名展示元素
    let cardName = document.createElement('h3');
    cardName.textContent = `来自：${userName}`;
    card.appendChild(cardName);
    
    // 创建消息展示元素
    let cardMessage = document.createElement('p');
    cardMessage.textContent = userMessage;
    card.appendChild(cardMessage);
    
    // 清空容器（可选，避免多次提交生成重复卡片）
    cardContainer.innerHTML = '';
    // 将生成的贺卡添加到容器中
    cardContainer.appendChild(card);
    
    // 可选：清空表单，方便重新输入
    form.reset();
});

关键修正点说明 #

• 阻止默认提交：必须调用e.preventDefault()，否则表单提交会刷新页面，之前的DOM操作都会被重置
• 正确操作DOM：添加元素时要传递DOM变量而非字符串，避免未定义变量的错误
• 动态生成内容：根据用户输入的值创建对应的DOM元素，组装成贺卡后添加到容器中
• 优化体验：清空容器和表单，提升重复使用的便捷性

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