从对象数组javascript创建列表

时间:2018-02-27 14:50:45

标签: javascript html arrays object html-lists

我有一个从用户输入表单构建的对象数组,我希望它们使用列表输出到HTML但不确定如何完成。我听说过使用innerHTML但是请注意,由于性能的原因,这不是最好的方法。这是我的代码。

JavaScript

var taskList = {
  name: []
}

function saveTask(e) {

  var task = document.getElementById("AddForm").value;
  if (task) {
    addToArray(task);
  }

  e.preventDefault();

}

function addToArray(task) {
  taskList.name.push(task);
  document.getElementById("myForm").reset();
  console.log(taskList);
}

document.getElementById("myForm").addEventListener('submit', saveTask);

我想在这里以HTML格式保存列表

 <ul id="items"></ul>

1 个答案:

答案 0 :(得分:0)

如果我理解你,你只想将每个推送的元素添加到ul,作为li。 我认为这种修改应该足够了:

function addToArray(task){
  taskList.name.push(task);
  document.getElementById("myForm").reset();
  var list = document.getElementById('items');
  var newLi = document.createElement('li');
  newLi.innerHTML = task;
  list.appendChild(newLi);
}