javascript - 使用纯 JS 提交时向 DOM 添加数据

Question

谁能告诉我实现相同目标的最佳方法是什么here用这个 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 = "";
        }
      };
    }

不使用 Angular。我只是想学习如何使用 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