Question

我想练习我的香草javascript技能，因为我最近已经如此重视图书馆。我的目标是过滤一系列JSON数据（通过2015年10月1日之后的事件），然后将它们作为列表项追加到DOM中，类为＆＃34; events＆＃34;，并赋予其能力删除事件。为什么这不起作用？

https://jsfiddle.net/youngfreezy/7jLswj9b/

function convertToJSData(arr) {
  for (var i = 0; i < arr.length; i++) {
    // var from = "10-11-2011";
    var from = arr[i].date;
    var numbers = from.match(/\d+/g);
    var date = new Date(numbers[2], numbers[0] - 1, numbers[1]);
    arr[i].date = date;
  }
  console.log(arr[0].date);
  return arr;

}


function getByDate(data) {
  convertToJSData(data);
  var filterDate = new Date(2015, 09, 01);
  return data.filter(function (el) {
    return el.date >= filterDate;
  });
}


var filteredDates = getByDate(events);
filteredDates.sort(function (a, b) {
  return a.date - b.date;
});
console.log(filteredDates.length); //returns 6



var appendHTML = function (el) {
  var list = document.getElementById("events");
  for (var i = 0; i < filteredDates.length; i++) {
    var listItem = filteredDates[i].name;
    listItem.className = "event-list";
    list.appendChild(listItem);
  }
};


appendHTML(document.body);

var deleteEvent = function () {
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  //Remove the parent list item from the ul
  ul.removeChild(listItem);
}

Answer 1

当你这样做时：

var listItem = filteredDates[i].name;
listItem.className = "event-list";
list.appendChild(listItem);

listItem是一个字符串。你不能把它作为一个孩子附加，你需要创建一个DOM元素并附加：

var newEl = document.createElement('div');
newEl.className = "event-list";
newEl.innerHTML = filteredDates[i].name;
list.appendChild(newEl);

附加到DOM - vanilla javascript

1 个答案: