Build newItem with createElement

list-editor/index.js

@@ -162,18 +162,36 @@ function editor(root, inputData, options) {
     }
 
     function newItem(value) {
-        let el = $('<div class="list-item">')
-            .attr('data-id', value.id)
-            .data('indented', value.indented)
-            .css('margin-left', (value.indented * 32) + 'px')
-        let line = $('<div class="line">')
-        let content = $('<div class="content">')
+        let el = document.createElement('div')
+        el.classList.add('list-item')
+        el.setAttribute('data-id', value.id)
+        el.style.marginLeft = (value.indented * 32) + 'px'
+
+        let $el = $(el).data('indented', value.indented)
+
+        let line = document.createElement('div')
+        line.classList.add('line')
+
+        let content = document.createElement('div')
+        content.classList.add('content')
+
         line.prepend(content)
-        options.transform(value.text, content, value.id, EDITOR)
-        line.prepend($('<span class="marker"></span>'))
-        line.prepend($('<span class="fold">&#9654;</span>'))
+
+        options.transform(value.text, $(content), value.id, EDITOR)
+
+        let marker = document.createElement('span')
+        marker.classList.add('marker')
+
+        let fold = document.createElement('span')
+        fold.classList.add('fold')
+        fold.innerHTML = '&#9654;'
+
+        line.prepend(marker)
+        line.prepend(fold)
+
         el.prepend(line)
-        return el;
+
+        return $el;
     }
 
     // TODO: build an actual tree of list items