The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
appendDom
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!');
}
}]);
