appendDom
August 9, 2007 - 9:17am — byron.adams54
Note: lists of elements are represented by arrays and each element is represented by a object [{}, {}, {}]
Note: any properties, events or attributes that work in the existing DOM API will work with appendDom() (innerHTML, className, style, onclick, etc..)
This plugin allows for easier and more intuitive creation of dom elements.
Examples
Static List
In this example we will append an unordered list onto the body of the document.
Code :
$('body').appendDom([{
tagName : 'ul',
childNodes : [{
tagName : 'li',
innerHTML : 'foo'
}, {
tagName : 'li',
innerHTML : 'bar'
}]
}]);
Note: lists of elements are represented by arrays and each element is represented by a object [{}, {}, {}]
Result :
<ul>
<li>foo</li>
<li>bar</li>
</ul>
Note: any properties, events or attributes that work in the existing DOM API will work with appendDom() (innerHTML, className, style, onclick, etc..)
Dynamic List
In this example we will generate an unordered list from an array and a basic template.
Code :
var list = ['foo', 'bar', 'barfoo', 'etc...'];
var template = [{ // here we create
tagName : 'ul', // a basic template
childNodes : [] // for our list.
}];
for (i in list) {
template[0].childNodes.push({ // now push a new object onto the
tagName : 'li', // childNodes array with each iteration.
innerHTML : list[i]
});
}
$('body').appendDom(template);
Result :
<ul>
<li>foo</li>
<li>bar</li>
<li>barfoo</li>
<li>etc...</li>
</ul>
Dynamic Tables
We will generate an table from an array of data and basic template.
this is very much the same as the above example.
Code :
var data = [
['a1', 'a2', 'a3', 'a4'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'c3', 'c4'],
['d1', 'd2', 'd3', 'd4'],
];
var template = [{
tagName : 'table',
childNodes : [{
tagName : 'tbody', // tbody is needed for Internet Exlorer
childNodes : []
}]
}];
for (i in data) {
var row = template[0].childNodes[0].childNodes;
row.push({
tagName : 'tr',
childNode : []
});
for (ii in data[i]) {
row.childNodes.push({
tagName : 'td',
innerHTML : data[i][ii]
});
}
}
$('body').appendDom(template);Result :
<table>
<tbody>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
</tr>
<tr>
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>c4</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
</tr>
</tbody>
</table>
Loading Remote Javascript/CSS
With appendDom() it is also possible to append elements to the head of a document, allowing us to load css and JavaScript files after the page has loaded.
Loading Javascript
$('head').appendDom([{
tagName :'script',
type : 'text/javascript',
src : '/path/to/your/javascript.js'
}]);
Loading CSS
$('head').appendDom([{
tagName : 'link',
rel : 'stylesheet',
type : 'text/css',
href : '/path/to/your/css'
}]);
Assigning Event Handlers
Assigning event handlers to elements while creating them is also easy thanks to appendDom().
In this example we will create a input button and assign an onclick event handler.
$('body').appendDom([{
tagName : 'input',
type : 'button',
value : 'Click Me!',
onclick : function () {
alert('Hello!');
}
}]);
Releases
| Official releases | Date | Size | Links | Status | |
|---|---|---|---|---|---|
| 1.0.0 | 2007-Aug-09 | 1.2 KB | Recommended for 1.1.x |  | |