@dosisod/nu-js v1.0.0
nu
Create HTML elements in JS more seamlessly
nu allows for more intuitive creation of HTML elements, increasing readability and decreasing redundancy.
Creating elements with nu
nu("p", {
"innerText": "Hello World"
}, document.body)
Creating elements without nu
var node=document.createElement("p")
node.innerText="Hello World"
document.body.appendChild(node)
Syntax
Basic syntaxing is as follows:
var x=nu("element-type", { //type of object to create
"property": "value", //properties you want to set
"another": "pair"
}, object, keep)
x
now holds the nu
element.
nu
can also be called anonymously, and elements will still be appended, but not returned.
Here, the object
can be an html element, an id for an element, or another nu
element:
nu("span", {"innerText": "Hello World!"}, "id") //append to element with id "id"
nu("span", {"innerText": "Hello World!"}, document.body}) //append to body
nu("span", {"innerText": "Hello World!"}, nu("div", {})) //append to empty div
If object
is an array, nu
will chain append (recursivley append itself to next item in list):
nu("span", {
"innerText": "Hello"
}, [
nu("div", {"id":"container"}), //append span to nu element
"tester", //append nu element to document.getElementById("tester")
document.body //append "tester" to document.body
], true)
true
is set to return the original element before chain appending (just the span
).
Setting this to false
or omitting it entirely will return the element after it has been chain appended.
To create a blank HTMLElement, pass {}
as the second parameter:
nu("span", {}) //makes an empty span
When calling nu
with only one parameter, document.getElementById
is called instead:
nu("insert-id")
//is equivalent to
document.getElementById("insert-id")
You can even use embedded functions for event listeners:
nu("span", {
"innerText": "Hello World",
"onclick": (e)=>alert(e.target.innerText)
}, document.body)
Installing
Copy and use the nu.min.js
file as needed.
Building
To compile the TypeScript, compile with using provided tsconfig.json
file:
$ tsc --build tsconfig.json
4 years ago