Avoid innerHTML assignments to be more pure DOM scripting

todo-list-vanilla/todocontroller.js

@@ -27,10 +27,10 @@ class TodoController {
 
             var todoItemLabelElement = document.createElement('span');
             todoItemLabelElement.classList.add('name');
-            todoItemLabelElement.innerHTML = todo.name;
+            todoItemLabelElement.appendChild(document.createTextNode(todo.name));
             var todoItemDescriptionElement = document.createElement('div');
 
-            todoItemDescriptionElement.innerHTML = todo.description;
+            todoItemDescriptionElement.appendChild(document.createTextNode(todo.description));
             todoItemDescriptionElement.classList.add('description');
             todoItemDescriptionElement.classList.add('hidden');
 
@@ -41,14 +41,13 @@ class TodoController {
                 todoItemElement.classList.add('done');
             }
 
-            todoItemElement.appendChild(todoItemLabelElement);
-
             var todoItemDoneButton = document.createElement('input');
 
             todoItemDoneButton.type = 'button';
             todoItemDoneButton.value = todo.done ? 'Reopen' : 'Done';
             todoItemDoneButton.id = 'done-item-' + index;
 
+            todoItemElement.appendChild(todoItemLabelElement);
             todoItemElement.appendChild(todoItemDoneButton);
             todoItemElement.appendChild(todoItemDescriptionElement);