Sorry, no real docs yet 😞
for now:
- read the (mostly) german doc (maybe with a little help of a translation service). Code examples are in english.
- view test page for usage examples. (caution! it's a test page, includes invalid test cases)
- read the comments in delement.js
2006-2018
Create DOM node tree.
the main advantage of dElement comes with more complicated / nested structures or loops
var a = K345.dElement({
element: 'a',
href: '/',
title: 'Home',
child: {
element: 'span',
className: 'noo',
child: [ // array because span has more than one child
{
element: 'img',
src: 'foo.png',
width: 458,
alt: 'fooooo me'
},
{
text: 'Hello!'
},
{
element: 'span',
text: 'Naaaa'
}
]
}
});HTML representation of above tree would be (minus line breaks and indentation):
<a href="/" title="Home">
<span class="noo">
<img src="foo.png" width="458" alt="fooooo me">
Hello!
<span>Naaaa</span>
</span>
</a>same node tree with vanilla code:
var a = document.createElement('a'),
im = document.createElement('img'),
sp1 = document.createElement('span'),
sp2 = document.createElement('span'),
txt1 = document.createTextNode('Hello!'),
txt2 = document.createTextNode('Naaaa');
a.href = '/';
a.title = 'Go home';
im.src = 'foo.png';
im.width = 458;
im.alt = 'fooooo me';
sp2.appendChild(txt2);
sp1.className = 'noo';
sp1.appendChild(im);
sp1.appendChild(txt1);
sp1.appendChild(sp2);
a.appendChild(sp1);already gets slightly confusing here.
a select element with 3 options plus simple javascript change event handling.
watch the similar example in the loop section!
var sel = K345.dElement({
element: 'select',
id: 'sel1',
onchange: function() {
console.log(this.value);
},
child: [{ // array for sibling child nodes of select
// sibling 1
element: 'option',
value: 'foo 1',
text: 'Option 1'
}, {
// sibling 2
element: 'option',
value: 'bar 2',
text: 'Option 2',
selected: true
}, {
// sibling 3
element: 'option',
value: 'baz 3',
text: 'Option 3'
}]
});// a button
var inp = K345.dElement({
element: 'input @button .foo #mybutton .bar'
});
// input field with predefined value
var inp2 = K345.dElement({
element: 'input @text .foo #myinput [email protected]'
});
// code to append elements to DOM tree goes here
...<input type="button" class="foo bar" id="mybutton">
<input type="text" class="foo" id="myinput" value="[email protected]">var ul2 = K345.dElement({
element: 'ul',
child: {
element: 'li',
id: 'item-!!n+1!!',
loop: 5,
text: '!!n!! times 2 plus 1 equals <b>!!2n+1!!</b>'
}
});<ul>
<li id="item-1">0 times 2 plus 1 equals <b>1</b></li>
<li id="item-2">1 times 2 plus 1 equals <b>3</b></li>
<li id="item-3">2 times 2 plus 1 equals <b>5</b></li>
<li id="item-4">3 times 2 plus 1 equals <b>7</b></li>
<li id="item-5">4 times 2 plus 1 equals <b>9</b></li>
</ul>here's the "three option select" example from above again
var sel = K345.dElement({
element: 'select',
id: 'sel1',
onchange: function() {
console.log(this.value);
},
child: {
element: 'option',
loop: {
count: 3,
sel: 2, // 2nd element (index 1) will be selected by default
values: ['foo', 'bar', 'baz'] // values for placeholder !!v!!
},
value: '!!v!! !!n+1!!',
text: 'Option !!n+1!!'
}
});var el = K345.dElement({
element: 'span',
text: '!!v!! ',
loop: {
count: 8,
values: ['A', 'B', 'C'],
valuesrepeat: true
// without valuesrepeat, count(8) would exceed array lenght(3)
}
});<span>A </span>
<span>B </span>
<span>C </span>
<span>A </span>
<span>B </span>
<span>C </span>
<span>A </span>
<span>B </span>- allow multiple properies
- test multiple properties
- test new "condition" keyword
- create elements in loops
- commit values and checked/selected
- update and change incomplete, bad and faulty comments in source
- write a extended and robust test page
- remove all bugs (yeah, sure)
- write docs (dream on)
helper function
dAppend calls dElement and appends created elements to DOM tree.
// usage
K345.dAppend(
String <id> | Node <reference to element>,
Object <declaration>
[, Const <appendmode> = K345.DAPPEND_APPEND ]
);where <appendmode> is one of the following "constants" or string values:
-
K345.DAPPEND_APPEND or 'beforeEnd'
append created element(s) as last child of element (default) -
K345.DAPPEND_FIRST or 'afterBegin'
append created element(s) as first child of element -
K345.DAPPEND_BEFORE or 'beforeBegin'
insert created element(s) before given element -
K345.DAPPEND_AFTER or 'afterEnd'
insert created element(s) after given element -
K345.DAPPEND_REPLACE or 'replaceElement'
replace element with created element(s) -
K345.DAPPEND_WIPE or 'wipeContent'
wipe all children of element and append created element(s)