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

【问题标题】：Adding data to DOM on submit with pure JS使用纯 JS 在提交时向 DOM 添加数据
【发布时间】：2016-06-15 19:35:09
【问题描述】：

谁能告诉我用这个 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。谢谢！

【问题讨论】：

标签： javascript html dom submit frontend

【解决方案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

【讨论】：

【解决方案2】：

你可以使用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>

【讨论】：

我明白这一点。我想知道如何在提交时将用户输入附加到联系人列表中。
见帖子第 3 行和第 4 行
这不会在提交时收集用户的输入？