Question

有人能告诉我用这个js看到here同样的事情的最佳方法是什么：

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

您可以使用form元素，input type="email"元素与required属性，onsubmit事件，event.preventDefault()，Array.prototype.push()，{{1} }，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();
}

Answer 2

做同样的一种方法是

  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

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

2 个答案: