create-simple-element
v0.1.0
Published
Create simple HTML elements using CSS selectors.
Downloads
3
Readme
create-simple-element
Create simple HTML elements using CSS selectors.
Import
From browser
import createSimpleElement from 'https://cdn.jsdelivr.net/npm/create-simple-element/createSimpleElement.js';
From Deno
Uses deno-dom
.
To use a different HTML implementation, see Custom usage.
import createSimpleElement from 'https://cdn.jsdelivr.net/npm/create-simple-element/createSimpleElement.deno.js';
From Node
Requires jsdom
: yarn add jsdom
.
To use a different HTML implementation, see Custom usage.
import createSimpleElement from 'create-simple-element';
Usage
Default
console.log(createSimpleElement('input#foo.bar[type="password"]:required').outerHTML);
// -> <input id="foo" class="bar" type="password" required="">
console.log(createSimpleElement('ul.foo > li.foo__bar + li.foo__bar.foo__bar--baz').outerHTML);
// -> <ul class="foo"><li class="foo__bar"></li><li class="foo__bar foo__bar--baz"></li></ul>
Custom
Here's an example using happy-dom
as HTML implementation on Node instead of the default one.
import { createParser } from 'css-selector-parser';
import { Window } from 'happy-dom';
import createSimpleElementCreator from './createSimpleElementCreator.js';
const createSimpleElement = createSimpleElementCreator({
createParser,
document: (new Window()).document
});
console.log(createSimpleElement('input#foo.bar[type="password"]:required').outerHTML);
// -> <input id="foo" class="bar" type="password" required="">
Supported items
- ID (
#foo
) - Class (
.foo
) - Attribute (
[foo="bar"]
) - Pseudo-classes (that actually create attributes) :
:checked
(short for[checked=""]
):disabled
(short for[disabled=""]
):required
(short for[required=""]
)
- Combinators :
- Child (
>
) - Next sibling (
+
)
- Child (
Emmet
This module only supports the CSS syntax,
e.g. it doesn't support grouping & multiplying like emmet
does.
For this purpose, use emel
instead :
import emel from 'https://cdn.jsdelivr.net/npm/emel/+esm';
console.log(emel('ul.foo>li.foo__bar*2', { returnSingleChild: true }).outerHTML);
// -> <ul class="foo"><li class="foo__bar"></li><li class="foo__bar"></li></ul>