appendDom Examples

appendDom Examples 介绍

This plugin allows for easier and more intuitive creation of dom elements.

Examples

Static List
Dynamic List
Dynamic Tables
Loading Remote Javascript/CSS
Assigning Event Handlers

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 :

Note: any properties, events or attributes that work in the existing DOM API
will work with appendDom() (innerHTML, className, style, onclick, etc..)

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>

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 :

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 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!'); } }]);