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

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 元素、具有 required 属性的 input type="email" 元素、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>

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

Adding data to DOM on submit with pure JS

html

javascript

frontend

dom

submit