Improve element rendering

src/element.ts

@@ -0,0 +1,19 @@
+export function renderElement(tag: string, attributes: object, ...elements: HTMLElement[]) {
+    const element = document.createElement(tag);
+    for (const key in attributes) {
+        // @ts-ignore
+        element[key] = attributes[key];
+    }
+
+    element.append(...elements);
+
+    return element;
+}
+
+export function renderText(text: string) {
+    return document.createTextNode(text);
+}
+
+export function renderClass(cssClass: string, ...elements: HTMLElement[]) {
+    return renderElement('div', {className: cssClass}, ...elements);
+}

src/render.ts

@@ -55,19 +55,13 @@ export function renderShortcut(shortcutActions: Array<ActionData>) {
 }
 
 function renderCardContent(element: HTMLElement) {
-    const content = document.createElement('div');
-    content.className = 'card-content';
-
-    const list = document.createElement('div');
-    list.className = 'list';
-
-    const ul = document.createElement('ul');
-    ul.innerHTML = element.outerHTML;
-
-    list.appendChild(ul);
-    content.appendChild(list);
-
-    return content;
+    return renderClass('card-content',
+        renderClass('list',
+            renderElement('ul', {},
+                element,
+            )
+        )
+    )
 }
 
 function renderAction(identifier: string, action: ActionData): Node {