html - appending to the DOM - vanilla javascript - Stack Overflow

admin管理员组

文章数量:1315360

I wanted to practice my vanilla javascript skills since I've been so library-heavy lately. My goal was to filter an array of JSON data (by events after 10/01/2015), and then append them as list items to the DOM, with the class being "events", and give the ability to delete events. Why isn't this working?

/

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);
}

I wanted to practice my vanilla javascript skills since I've been so library-heavy lately. My goal was to filter an array of JSON data (by events after 10/01/2015), and then append them as list items to the DOM, with the class being "events", and give the ability to delete events. Why isn't this working?

https://jsfiddle/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);
}

• javascript
• html
• dom

Share Improve this question Follow edited Nov 18, 2015 at 21:27 devdropper87 asked Nov 18, 2015 at 21:16 devdropper87devdropper87 4,2071313 gold badges4848 silver badges7272 bronze badges 5

• You still need to include the HTML you're working with. For all we know, there's no #events element. – Harris Commented Nov 18, 2015 at 21:20
• I made a fiddle to make it easier to see. the error is that nothing is getting appended :( jsfiddle/youngfreezy/7jLswj9b/1 – devdropper87 Commented Nov 18, 2015 at 21:21
• You don't use your argument in the appendHTML function – Sagi Commented Nov 18, 2015 at 21:21
• Well, in the "flag" dialog there is an option describing exactly your question. Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself At the moment of loading I see only about 30-40 lines of a javascript object... Try to reduce it and give some jsfiddle demo. – Al.G. Commented Nov 18, 2015 at 21:23
• yea that's what I'm seeing. also, included a fiddle above, it's working based on the answer provided – devdropper87 Commented Nov 18, 2015 at 21:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

when you do:

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

listItem is a string. You cannot append it as a child, you need to create a DOM element and append that:

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

On a separate note, to just focus on the vanilla JS part of the question, maybe something like the following should illustrate the idea more generally:

let newElement = document.createElement("div");
newElement.innerHTML += `<ul><li>Item 1</li><li>Item 2</li></ul>`;
newElement.className = "item-list";
document.getElementById("root").append(newElement);

本文标签： htmlappending to the DOMvanilla javascriptStack Overflow