use DOM instead of innerHTML

This commit is contained in:
Joao Moreno
2019-06-17 17:49:54 +02:00
parent 1f97407f41
commit 3f6640e451
2 changed files with 36 additions and 12 deletions

View File

@@ -987,14 +987,28 @@ export function prepend<T extends Node>(parent: HTMLElement, child: T): T {
const SELECTOR_REGEX = /([\w\-]+)?(#([\w\-]+))?((.([\w\-]+))*)/;
export function $<T extends HTMLElement>(description: string, attrs?: { [key: string]: any; }, ...children: Array<Node | string>): T {
export enum Namespace {
HTML = 'http://www.w3.org/1999/xhtml',
SVG = 'http://www.w3.org/2000/svg'
}
function _$<T extends HTMLElement>(namespace: Namespace, description: string, attrs?: { [key: string]: any; }, ...children: Array<Node | string>): T {
let match = SELECTOR_REGEX.exec(description);
if (!match) {
throw new Error('Bad use of emmet');
}
let result = document.createElement(match[1] || 'div');
attrs = { ...(attrs || {}) };
let tagName = match[1] || 'div';
let result: T;
if (namespace !== Namespace.HTML) {
result = document.createElementNS(namespace as string, tagName) as T;
} else {
result = document.createElement(tagName) as unknown as T;
}
if (match[3]) {
result.id = match[3];
@@ -1003,7 +1017,6 @@ export function $<T extends HTMLElement>(description: string, attrs?: { [key: st
result.className = match[4].replace(/\./g, ' ').trim();
}
attrs = attrs || {};
Object.keys(attrs).forEach(name => {
const value = attrs![name];
if (/^on\w+$/.test(name)) {
@@ -1030,6 +1043,14 @@ export function $<T extends HTMLElement>(description: string, attrs?: { [key: st
return result as T;
}
export function $<T extends HTMLElement>(description: string, attrs?: { [key: string]: any; }, ...children: Array<Node | string>): T {
return _$(Namespace.HTML, description, attrs, ...children);
}
$.SVG = (description: string, attrs?: { [key: string]: any; }, ...children: Array<Node | string>) => {
return _$(Namespace.SVG, description, attrs, ...children);
};
export function join(nodes: Node[], separator: Node | string): Node[] {
const result: Node[] = [];