Native JavaScript DOM elements creations
Let’s go through all patterns we would like to use and what needs to be improved for better experience.
# Creating element(s) (with custom attributes)
You can create a native DOM element by using the document.createElement(). It is also possible to provide a some attribute(s) declaratively using Object.assign(). More precisely, this way you can sets some IDL also known as a JavaScript property.
document.body.append(
+`deka-dom-el` — Elements `deka-dom-el` — Elements
Basic concepts of elements modifications and creations.
Native JavaScript DOM elements creations
Let’s go through all patterns we would like to use and what needs to be improved for better experience.
// when NPM
+import { assign, el, elNS } from "deka-dom-el";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+
+// “internal” utils
+import {
+ assignAttribute,
+ classListDeclarative,
+ chainableAppend
+} from "deka-dom-el";
+# Creating element(s) (with custom attributes)
You can create a native DOM element by using the document.createElement(). It is also possible to provide a some attribute(s) declaratively using Object.assign(). More precisely, this way you can sets some IDL also known as a JavaScript property.
document.body.append(
document.createElement("div")
);
console.log(
@@ -130,4 +140,4 @@ document.body.append(
console.log(
document.body.innerHTML.includes("<svg></svg><math></math>")
)
-Mnemonic
assign(<element>, ...<idl-objects>): <element> — assign properties to the elementel(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name> — simple element containing only textel(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name> — element with more propertiesel(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function> — using component represented by functionel(<...>, <...>, ...<addons>) — see following pageelNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments> — typically SVG elements
# Mnemonic
assign(<element>, ...<idl-objects>): <element>— assign properties to the elementel(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name>— simple element containing only textel(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name>— element with more propertiesel(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>— using component represented by functionel(<...>, <...>, ...<addons>)— see following pageelNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>— typically SVG elements