Replace innerHTML with innerText

remarcmij · remarcmij · commit 89df6961750d · 2018-10-13T15:10:51.000+02:00
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -151,6 +151,8 @@ It should include the following components:
 2. A left-hand column that displays basic information about the selected repository.
 3. A right-hand column that displays a list of contributors to the repository.
 
+    >In case you run out of time, you can also do the contributors list in week 2.
+
 **Functional Requirements:**
 
 1. The list of repositories in the `select` element should be sorted (case-insensitive) on repository name.
diff --git a/homework/src/App.js b/homework/src/App.js
@@ -29,6 +29,16 @@ class App {
     }
   }
 
+  /**
+   * Removes all child elements from a container element
+   * @param {*} container Container element to clear
+   */
+  clearContainer(container) {
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+  }
+
   /**
    * Fetch contributor information for the selected repository and render the
    * repo and its contributors as HTML elements in the DOM.
@@ -40,8 +50,7 @@ class App {
       const contributors = await repo.fetchContributors();
 
       const container = document.getElementById('container');
-      // Erase previously generated inner HTML from the container div
-      container.innerHTML = '';
+      this.clearContainer(container);
 
       const leftDiv = Util.createAndAppend('div', container);
       const rightDiv = Util.createAndAppend('div', container);
diff --git a/homework/src/Util.js b/homework/src/Util.js
@@ -7,8 +7,8 @@ class Util {
     parent.appendChild(elem);
     Object.keys(options).forEach((key) => {
       const value = options[key];
-      if (key === 'html') {
-        elem.innerHTML = value;
+      if (key === 'text') {
+        elem.innerText = value;
       } else {
         elem.setAttribute(key, value);
       }
diff --git a/homework/src/index.js b/homework/src/index.js
@@ -21,8 +21,8 @@
     parent.appendChild(elem);
     Object.keys(options).forEach((key) => {
       const value = options[key];
-      if (key === 'html') {
-        elem.innerHTML = value;
+      if (key === 'text') {
+        elem.innerText = value;
       } else {
         elem.setAttribute(key, value);
       }
@@ -34,9 +34,9 @@
     fetchJSON(url, (err, data) => {
       const root = document.getElementById('root');
       if (err) {
-        createAndAppend('div', root, { html: err.message, class: 'alert-error' });
+        createAndAppend('div', root, { text: err.message, class: 'alert-error' });
       } else {
-        createAndAppend('pre', root, { html: JSON.stringify(data, null, 2) });
+        createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
       }
     });
   }
