Create HTML elements with css syntax
This is meant to be an easy way to create/append elements with jquery
Using regular jQuery
$("<div>").attr({id: "hello", "data-test": "test"}).addClass("world").text("!").prop({contentEditable: true});
Using $.el
$.el("#hello.world[data-test='test' contentEditable]{!}");
Using regular jQuery
var $table = $("<table />").attr({id: "table1"});
var $thead = $("<thead />").appendTo($table);
var $row1 = $("<tr />").addClass("row1").appendTo($thead);
$("<th />").addClass("col1").text("1").appendTo($row1);
$("<th />").addClass("col2").text("2").appendTo($row1);
var $tbody = $("<tbody />").appendTo($table);
var $row2 = $("<tr />").addClass("row2").appendTo($tbody);
$("<td />").addClass("col1").text("3").appendTo($row2);
$("<td />").addClass("col2").text("4").appendTo($row2);
Using $.el
var $table = $.el("table#table1");
var $thead = $table.el("thead");
var $row1 = $thead.el("tr.row1");
$row1.el("th.col1{1}");
$row1.el("th.col2{2}");
var $tbody = $table.el("tbody");
var $row2 = $tbody.el("tr.row2");
$row2.el("td.col1{3}");
$row2.el("td.col2{4}");
1 | 2 |
---|---|
3 | 4 |
The tag must be specified at the beginning of the string otherwise div
is assumed.
// <div></div>
$.el();
// <span></span>
$.el("span");
The ID must be preceded by a #
. There may be at most one ID specified.
// <div id="id"></div>
$.el("#id");
A Class must be preceded by a .
. There may be multiple classes specified.
// <div class="class1 class2"></div>
$.el(".class1.class2");
Attributes must be surrounded by []
. There may be multiple attributes in one group and/or multiple attribute groups.
// <div data-test1="test1" data-test2="test2"></div>
$.el("[data-test1='test1' data-test2='test2']");
$.el("[data-test1='test1'][data-test2='test2']");
Text must be surrounded by {}
. Multiple text nodes will be appended.
// <div>Hello World!</div>
$.el("{Hello World!}");
$.el("{Hello}{ World!}");
When chaining .el by default it returns the newly created element. There is a second argument returnParent
that will return the parent of the newly created element to allow creating siblings easily.
// <table><tbody><tr><td>1</td><td>2</td></tr></tbody></table>
$.el("table").el("tbody").el("tr").el("td{1}", true).el("td{2}");
You can use these in any order with the exception of the tag which, if specified, must be specified first.
// <label for="checkme">Check This <input id="checkme" class="check" type="checkbox" name="checkme" checked="checked" /></label>
$.el("label[for='checkme']{Check This }").el("input#checkme.check[type='checkbox' name='checkme' checked]", true);
White space is allowed between tokens.
// <div id="test" class="test1"></div>
$.el("#test .test1");
Special characters must be escaped with \
// <div class="test#1"></div>
$.el(".test\\#1");