Simple DOM elements creation on Javascript, using something like a CSS selector syntax, with only 180 LOC. Also works on server-side.
npm install domator --save
var d = require('domator')
var el = d('p.the-class Hello!') // <p class="the-class">Hello!</p>
document.body.appendChild(el)
<script src="dist/domator.min.js"></script>
<script>
;(function() {
var el = domator('p.the-class Hello!') // <p class="the-class">Hello!</p>
document.body.appendChild(el)
})()
</script>
To create a simple div:
var el = d('div') // <div></div>
To create a div with 3 span childs:
var el = d('div', ['span', 'span', 'span'])
/* Produces:
<div>
<span></span>
<span></span>
<span></span>
</div>
*/
Can be nested indefinitely:
var el = d(
'div', [
'div', [
'div' [
'span',
'span',
'span'
]
]
]
)
/* Produces:
<div>
<div>
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
*/
With custom attributes, text, and className:
var el = d('div', {
'data-custom': 'the-custom-value',
text: 'Hello!',
className: 'the-class', // "class" and "className" are the same
id: 'the-id'
})
/* Produces:
<div class="the-class" id="the-id" data-custom="the-custom-value">
Hello!
</div>
*/
The same as the last one, but, with a slick syntax:
var el = d('#the-id.the-class[data-custom="the-custom-value"] Hello!')
/* Produces:
<div class="the-class" id="the-id" data-custom="the-custom-value">
Hello!
</div>
*/
If you dont have a single root element, it creates a DocumentFragment with all of them:
var el = d('.one', '.two', '.three')
document.body.appendChild(el)
/* Leaves the <body> with:
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
*/
To keep a reference to a child, you can pre-create an element and pass it on to the constructor:
var span = d('span.some-child')
var el = d('div.the-parent', [span])
/* Produces:
<div class="the-parent">
<span class="some-child"></span>
</div>
*/
Using the domator() function you can create any amount of DOM Nodes, with and
infinite amount of children.
domator(el, attrs, [children...] [, el, attrs, [children...]]...)
elNode Element.The domator selector is used to be able to create an element with default values super easy, all the values are optional. A complete example would be:
tag#id.class-name[attr="value"] Hello world!
tag
divid, class, or attr.
.the-class produces <div class="the-class"></div>#id
id= of the element.#id defined..class-name
class="class-name" value to be setted to the element..one.two creates <div class="one two"></div>[attr="value"]
"value" is optional.
input[required] creates <input required> Hello world!
div Hello world! creates <div>Hello world!</div>attrsobjectAttributes of the element, e.g.:
domator('div', {"data-something": "hello"}) // Produces <div data-something="hello"></div>
childrenArrayArray with children elements to be added inside the element. The array receives the same arguments as the domator(...) function. e.g.:
domator('div.parent', ['span.child']) // Produces: <div class="parent"><span class="child"></span></div>
Takes a valid Document element.
It's needed when used on other environments than the browser, where is no default window.document.
Helper function to convert existing node elements to string.
Helper function used internally to create elements, takes a Domator Selector and
optionally an attributes object.
To use it on server side, you must set a valid document element first:
var jsdom = require('jsdom')
var d = require('domator')
d.setDocument(jsdom.jsdom())
var el = d('p.the-class Hello!') // <p class="the-class">Hello!</p>
npm run test
MIT
FAQs
Minimal & Fast DOM creation.
We found that domator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.
Security News
FSF files an amicus brief against Neo4j, defending the AGPL and warning against adding restrictive terms that undermine free software rights.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.