將數據添加到DOM與純JS

Question

提交誰能告訴我什麼是最好的方式來實現看出here與這個js同樣的事情。我只是想了解如何使用javascript將用戶輸入保存到DOM。謝謝！

Answer 1

一種方法是

var contacts = ["hi@me.no", "hi@you.com"], 
     ul = document.querySelectorAll('.email-list')[0]; 

    // Iterate over the contacts and append it to the ul 
    for (var i = 0; i < contacts.length; i++) { 
    addEmailToContacts(contacts[i]); 
    } 

    function addEmailToContacts(contact) { 
     var li = document.createElement('li'); 
     li.innerHTML = contact; 

     ul.appendChild(li); 
    }; 

    // Click event for the submit 
    document.querySelector('#submit').addEventListener('click', function(e) { 
    e.preventDefault(); 
    // Get the value 
    var value = document.querySelectorAll('input[type="mail"]')[0].value; 
    if (value) { 
     addEmailToContacts(value); 
    } 
    }) 

Check Codepen

Answer 2

您可以使用form元素，required屬性，onsubmit事件，event.preventDefault()，Array.prototype.push()，Array.prototype.forEach()input type="email"元素，.innerHTML

var contacts = ["hi@me.no", "hi@you.com"], 
 
    div = document.getElementById("update"); 
 

 
function updateContacts() { 
 
    div.innerHTML = ""; 
 
    contacts.forEach(function(address) { 
 
    div.innerHTML += address + "<br>" 
 
    }) 
 
} 
 

 
updateContacts(); 
 

 
document.forms[0].onsubmit = function(event) { 
 
    event.preventDefault(); 
 
    // user input to update `contacts` array 
 
    contacts.push(this["input"].value); 
 
    // display updated `contacts` array  
 
    updateContacts(); 
 
}

<div id="update"> 
 
</div> 
 

 
<form> 
 
    <input name="input" type="email" required /> 
 
    <input type="submit" /> 
 
</form>

做同樣的