domelo

Create DOM element from string.

Features:

• Function or tagged template literal implementation
• Handles elements which need specific parent element (e.g. td needs table element)
• Returns DocumentFragment with multiple elements if requested

Install

npm install domelo --save

Usage

import domelo, { html, fragment } from 'domelo';

const div = domelo('<div id="becky" data-rocco="sammy">zoe</div>'); // Returns div element
const span = html`<p id="harley"><b class="misty">chester</b></p>`; // Returns p element
const list = fragment`<li id="gus"><b class="walter">charlie</b></li><li id="blue"><b class="sydney">teddy</b></li>`; // Returns fragment with 2 list elements

Tagged template implementation is here so you can easily make your code editor syntax higlight strings inside html template function as HTML markup.

Fragment tagged template function is used to return DocumentFragment, which is useful if you want to return multiple elements.

API

domelo(string, outputFragment)

Returns: (Element|Text|DocumentFragment)

Creates DOM element from string. Returns Node which can be Element, Text or DocumentFragment.

string

Type: string

HTML string to convert to DOM element.

outputFragment

Type: boolean
Default: false

Should function return DocumentFragment or not. Useful if you want to return multiple elements.

FAQ

How are non-textual interpolations handled?

You need to explictly return string-like value to get proper content shown:

• For Element return outerHTML property value
• For Text return wholeText property value
• Arrays should be joined at least with empty string
• Fragments can be handled referencing children or childNodes property and should be joined at least with empty string

Browser support

Tested in Chrome 72, Edge 15, Firefox 65 and should work in all modern browsers (support based on Browserslist configuration).

Test

For automated tests, run npm run test:automated (append :watch for watcher support).

Acknowledgments

• How to properly convert HTML string to a DOM element
• jQuery wrapping implementation
• HTML templating with ES6 template strings

License

MIT © Ivan Nikolić