Javascript 如何通过在提交时工作的函数显示dom元素

我看到了一些问题，

• 您不会在表单提交后创建card元素本身并将其附加到cardContainer.

• 停止表单提交的默认行为以防止页面重新加载.

    let form = document.createElement('form');
    form.setAttribute('id', 'card-form');
  
    // input for name
    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);
  
    // textarea for greeting msg
    let messageTextArea = document.createElement('textarea');
    messageTextArea.setAttribute('id', 'message-input');
    messageTextArea.setAttribute('placeholder', 'Your Message');
    messageTextArea.required = true;
    form.appendChild(messageTextArea);
  
    //input for image 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);
  
    // submit button
    let submitButton = document.createElement('button');
    submitButton.setAttribute('type', 'submit');
    submitButton.innerText = 'Finish';
    form.appendChild(submitButton);
  
    // Append form to the document body
    document.body.appendChild(form);
  
    // Create card container
    let cardContainer = document.createElement('div');
    cardContainer.setAttribute('id', 'card-container');
    document.body.appendChild(cardContainer);
  
    // Event listener for form submission
    document.getElementById('card-form').addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent default form submission behavior
  
        // Get form values
        let name = document.getElementById('name-input').value;
        let message = document.getElementById('message-input').value;
        let imageUrl = document.getElementById('url-input').value;
  
        // Create card element
        let card = document.createElement('div');
        card.classList.add('card'); // You can add CSS classes or styles here
        card.innerHTML = `
            <h2>${name}</h2>
            <p>${message}</p>
            <img src="${imageUrl}" alt="User Image">
        `;
  
        // Append card to the card container
        cardContainer.appendChild(card);
    });