使用纯 JS 提交时将数据添加到 DOM

Adding data to DOM on submit with pure JS

本文关键字：数据 添加 DOM JS 提交      更新时间：2023-09-26

有人可以告诉我用这个js实现同样的事情的最佳方法是什么：

function ContactController($scope) {
   $scope.contacts = ["hi@me.no", "hi@you.com"];
    $scope.addMail = function() {
        if(this.mailAdress) {
          $scope.contacts.push($scope.mailAdress);
          $scope.mailAdress = "";
        }
      };
    }

不使用角度。 我只是想学习如何使用 javascript 将用户输入保存到 DOM。 谢谢！

做同样事情的一种方法是 

  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);
    }
  })

检查代码笔

您可以使用

form元素，input type="email"具有required属性的元素，onsubmit事件，event.preventDefault()，Array.prototype.push()，Array.prototype.forEach()，.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>

相关文章：