Replace inner html

package.json

@@ -51,12 +51,12 @@
     "@jarmee/jest-dom-custom-matchers": "^1.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
-    "eslint": "^5.10.0",
+    "eslint": "^5.16.0",
     "eslint-config-prettier": "^3.3.0",
     "eslint-plugin-prettier": "^3.0.0",
     "husky": "^1.2.1",
     "jest": "^23.6.0",
-    "microbundle": "^0.9.0",
+    "microbundle": "^0.13.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.15.3"
   },

src/scrollnav.js

@@ -62,9 +62,7 @@ function init(elem, options) {
     if (this.settings.debug) {
       // eslint-disable-next-line no-console
       console.error(`
-        scrollnav build failed, options.insertLocation "${
-          this.settings.insertLocation
-        }" is not a valid option
+        scrollnav build failed, options.insertLocation "${this.settings.insertLocation}" is not a valid option
       `);
     }
     return;

src/util/createList.js

@@ -2,27 +2,27 @@ export default function createList(data, isSubList = false) {
   const suffix = isSubList ? '__sub-' : '__';
   const baseClass = 'scroll-nav' + suffix;
 
-  const itemsMarkup = `
-    ${data
-      .map(
-        item =>
-          `<li class="${baseClass}item" data-sn-section="${item.id}">
-            <a class="${baseClass}link" href="#${item.id}">${item.text}</a>
-            ${
-              item.subSections && item.subSections.length
-                ? `${createList(item.subSections, true)}`
-                : ''
-            }
-          </li>`
-      )
-      .join('')}
-  `;
+  let olElem = document.createElement('ol');
+  olElem.classList.add(baseClass + 'list');
 
-  const list = `
-    <ol class="${baseClass}list">
-      ${itemsMarkup}
-    </ol>
-  `;
+  data.forEach(function(item) {
+    let liElem = document.createElement('li');
+    liElem.classList.add(baseClass + 'item');
+    liElem.setAttribute('data-sn-section', item.id);
+    olElem.appendChild(liElem);
 
-  return list;
+    let aElem = document.createElement('a');
+    aElem.classList.add(baseClass + 'link');
+    aElem.setAttribute('href', '#' + item.id);
+    let linkText = document.createTextNode(item.text);
+    aElem.appendChild(linkText);
+    liElem.appendChild(aElem);
+
+    if (item.subSections.length) {
+      let subList = createList(item.subSections, true);
+      liElem.appendChild(subList);
+    }
+  });
+
+  return olElem;
 }

src/util/createNav.js

@@ -3,7 +3,7 @@ import createList from './createList';
 export default function createNav(data) {
   const nav = document.createElement('nav');
   nav.className = 'scroll-nav';
-  nav.innerHTML = createList(data);
+  nav.appendChild(createList(data));
 
   return nav;
 }