domEL dom manipulation examples step-by-step

Start!
```
domEl('div','this is a new div',[['id','example']],document.body,0);

ex = document.getElementById('example');
```
We have created <div id="example" /> element - we will play with its content in next steps.

Additionally a reference to this div was created, so we can use ex instead of document.getElementById('example') in following examples
Next
```
domEl('p','a paragraph','',ex,1);
```
New <p /> element was created and replaced div's content (the last parameter = 1)

Executing this code more than once will not show more elements, because the previously created are removed before new is added.

Next
```
domEl('div',ex.getElementsByTagName('p')[0],'',ex);
```
New div, we passed reference to an existing node as the new element's content. The referenced node was cloned and used as new div's content.

Executing this code more than once would create more elements.

Next
```
domEl('','just a text node','',ex);
```
The first parameter is empty - new element is a text node.

Next
```
domEl('span',':)',[['class','smiley']],ex.getElementsByTagName('p'));
```
Now the fourth attribute is an array of nodes - new element was appended to every element in array.

Next
```
domEl('','','',ex.getElementsByTagName('span'),1);
```
Smileys weren't cool at all, so we remove them. Empty node with empty content replaces spans' content. In such situaation function removes target nodes from DOM.

Next
```
domEl('ul',[domEl('li','new item in new list'),domEl('li','second'),domEl('li','third')],'',ex,'');
```
Because we can use functions as arguments, we can use domEl inside domEl - this example has created new <ul /> element with three <li /> elements.

Next
```
ex.insertBefore(domEl('em','returned element',[['class','smiley']]),ex.firstChild); 
```
There's no fourth attribute so function returns new element instead of appending it somewere. The returned element can be used by another function - in this example insertBefore()

Next
```
domEl(ex.firstChild,'new element','',ex);
```
First argument can be a node reference, not a string: new element is an empty copy of referenced node (inherits attributes, but not content).

Next
```
domEl(ex.firstChild,ex.firstChild,'',ex);
```
First and second arguments are references to the same node, so the node was duplicated.

Next

domEl('a','thank you.',[['href','/domel-easier-dom-manipulation,20060325l']],ex,1);