Architext
Basic Usage
architext("div p[text=This is a paragraph containing some text]");
Add IDs, classes and attributes.
To add an ID or a class.
architext('div#foo p.intro[text=This is some text inside .intro]');
Add attributes with the square brackets. The " or ' can be used or omitted.
architext('div#foo a.bar[text="A link to github"][href=http://www.github.com/quozzo]');
Omitting the element when assigning an ID or class will assume you want a div element.
architext('#foo .lorem.ipsum[text=Default div elements here]');
Creating multiple elements
Use the multiplier to create multiple elements.
architext('ul li*3[text=List]');
Use the $ symbol to include the iterator number.
architext('ul li*3[text="List $"]');
The $ symbol can be used anywhere in the current element. Multiple $ symbols add extra padding.
architext('ul li*3.item-$[text=List $$]');
Note: The iterator number cannot be used on the elements children
The multiplier can be used on any element in the chain.
architext('table tr*3 td*5');
Create Siblings
Create siblings using either the + or ~ symbol.
architext('ul li*2 img[src=someimage.jpg][height=100] + br + a[href='somelargerimage.jpg][text=View larger image]');
Use groups to build nesting HTML
Nest multiple groups
architext("div (ul li*3[text=List $]) + (div p[text=Paragraph] img) + div a[text=google][href=http://google.com]");
Unlimited nesting is possible, allowing you to create a whole document in one line!
architext("div (ul li.*3[text=List $]) + (div*3 (h3[text=Paragraph] + a[href=http://google.com] img[src=https://services.github.com/kit/images/github-icon.jpg][height=50px] + span[text=I'm a link]) + p (i[text=some italic] b[text= and bold text.]) span[text= something else] ) + footer div");
Custom element and attributes
architext also supports custom attributes and elements.
architext('custom-element[data-foo=bar]');
jQuery support
If jQuery is detected then architext can be used as an extension of jQuery.
$.architext("div p[text=This is a paragraph containing some text]");
The HTML will be wrapped in jQuery allowing the use of all it's methods.
$.architext("div p[text=This is a paragraph containg some text]").appendTo('.eg:eq(13)');
architext can also be used as a plugin of jQuery.
$('.eg:eq(14)').architext('ul li*2 img[src=someimage.jpg] + a[text=View larger image]').find('img').after("<br>");