# core/factories/element.factory.ts

> 54 lines of code and 9 definitions.

Tree: Site tree
Language: typescript
Layer: infrastructure
Canonical: https://banes-lab.com/anatomy/tree#file-core-factories-element-factory-ts
Source text: https://banes-lab.com/assets/sources/source.7d0b97b3d4eadf5e9418e56db9b3f7eda207b18e7af661f11b5c70e9bda8391a.generated.txt

## Definitions

- `createElement` (lexical_declaration, line 15, exported)
- `appendChildren` (lexical_declaration, line 9, exported)
- `clearChildren` (lexical_declaration, line 35, exported)
- `createVectorNode` (lexical_declaration, line 41, exported)
- `applyAttributes` (lexical_declaration, line 3)
- `createVectorElement` (lexical_declaration, line 58, exported)
- `VECTOR_NAMESPACE` (lexical_declaration, line 39)
- `element` (lexical_declaration, line 42, exported)
- `parsed` (lexical_declaration, line 59, exported)

## Used by

- [presentation/components/code.component.ts](https://banes-lab.com/source/tree/presentation/components/code.component.ts.md)
- [presentation/components/folder.component.ts](https://banes-lab.com/source/tree/presentation/components/folder.component.ts.md)
- [presentation/components/link.component.ts](https://banes-lab.com/source/tree/presentation/components/link.component.ts.md)
- [presentation/components/reference.component.ts](https://banes-lab.com/source/tree/presentation/components/reference.component.ts.md)
- [presentation/components/search.component.ts](https://banes-lab.com/source/tree/presentation/components/search.component.ts.md)
- [presentation/components/source.component.ts](https://banes-lab.com/source/tree/presentation/components/source.component.ts.md)
- [presentation/components/step.component.ts](https://banes-lab.com/source/tree/presentation/components/step.component.ts.md)
- [presentation/components/walk.component.ts](https://banes-lab.com/source/tree/presentation/components/walk.component.ts.md)
- [presentation/renderers/anatomy.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/anatomy.renderer.ts.md)
- [presentation/renderers/block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/block.renderer.ts.md)
- [presentation/renderers/card.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/card.renderer.ts.md)
- [presentation/renderers/chapter.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/chapter.renderer.ts.md)
- [presentation/renderers/diagram.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/diagram.renderer.ts.md)
- [presentation/renderers/document.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/document.renderer.ts.md)
- [presentation/renderers/element.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/element.renderer.ts.md)
- [presentation/renderers/figure.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/figure.renderer.ts.md)
- [presentation/renderers/folder.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/folder.renderer.ts.md)
- [presentation/renderers/glossary.block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/glossary.block.renderer.ts.md)
- [presentation/renderers/glossary.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/glossary.renderer.ts.md)
- [presentation/renderers/grammar.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/grammar.renderer.ts.md)
- [presentation/renderers/home.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/home.renderer.ts.md)
- [presentation/renderers/learning.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/learning.renderer.ts.md)
- [presentation/renderers/lesson.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/lesson.renderer.ts.md)
- [presentation/renderers/link.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/link.renderer.ts.md)
- [presentation/renderers/markdown.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/markdown.renderer.ts.md)
- [presentation/renderers/metric.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/metric.renderer.ts.md)
- [presentation/renderers/ontology.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/ontology.renderer.ts.md)
- [presentation/renderers/page.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/page.renderer.ts.md)
- [presentation/renderers/panel.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/panel.renderer.ts.md)
- [presentation/renderers/search.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/search.renderer.ts.md)
- [presentation/renderers/section.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/section.renderer.ts.md)
- [presentation/renderers/site.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/site.renderer.ts.md)
- [presentation/renderers/source.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/source.renderer.ts.md)
- [presentation/renderers/syntax.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/syntax.renderer.ts.md)
- [presentation/renderers/tab.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/tab.renderer.ts.md)
- [presentation/renderers/table.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/table.renderer.ts.md)
- [presentation/renderers/text.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/text.renderer.ts.md)
- [presentation/renderers/walk.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/walk.renderer.ts.md)
- [presentation/views/home.view.ts](https://banes-lab.com/source/tree/presentation/views/home.view.ts.md)
- [presentation/views/search.view.ts](https://banes-lab.com/source/tree/presentation/views/search.view.ts.md)
- [presentation/widgets/overlay.widget.ts](https://banes-lab.com/source/tree/presentation/widgets/overlay.widget.ts.md)
- [presentation/widgets/reference.widget.ts](https://banes-lab.com/source/tree/presentation/widgets/reference.widget.ts.md)

## Source

```typescript
import type { ElementChild, ElementSpec, ElementTag } from "#types/element.types";

const applyAttributes = function applyAttributes(element: Element, attributes: Readonly<Record<string, string>>): void {
    for (const [name, value] of Object.entries(attributes)) {
        element.setAttribute(name, value);
    }
};

export const appendChildren = function appendChildren(parent: Element, children: readonly ElementChild[]): void {
    for (const child of children) {
        parent.append(child);
    }
};

export const createElement = function createElement<T extends ElementTag>(
    tag: T,
    spec: ElementSpec = {},
): HTMLElementTagNameMap[T] {
    const element = document.createElement(tag);
    if (spec.className !== undefined) {
        element.className = spec.className;
    }
    if (spec.text !== undefined) {
        element.textContent = spec.text;
    }
    if (spec.attributes !== undefined) {
        applyAttributes(element, spec.attributes);
    }
    if (spec.children !== undefined) {
        appendChildren(element, spec.children);
    }
    return element;
};

export const clearChildren = function clearChildren(parent: Element): void {
    parent.replaceChildren();
};

const VECTOR_NAMESPACE = "http://www.w3.org/2000/svg";

export const createVectorNode = function createVectorNode(name: string, spec: ElementSpec = {}): Element {
    const element = document.createElementNS(VECTOR_NAMESPACE, name);
    if (spec.className !== undefined) {
        element.setAttribute("class", spec.className);
    }
    if (spec.text !== undefined) {
        element.textContent = spec.text;
    }
    if (spec.attributes !== undefined) {
        applyAttributes(element, spec.attributes);
    }
    if (spec.children !== undefined) {
        appendChildren(element, spec.children);
    }
    return element;
};

export const createVectorElement = function createVectorElement(markup: string): Element {
    const parsed = new DOMParser().parseFromString(markup, "image/svg+xml");
    return document.importNode(parsed.documentElement, true);
};
```