jquery.el.js's Introduction

jquery.el.js

Create HTML elements with css syntax

Introduction

This is meant to be an easy way to create/append elements with jquery

Create Element

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

Append Element

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

Usage

Tag

The tag must be specified at the beginning of the string otherwise div is assumed.

// <div></div>
$.el();

// <span></span>
$.el("span");

ID

The ID must be preceded by a #. There may be at most one ID specified.

// <div id="id"></div>
$.el("#id");

Classes

A Class must be preceded by a .. There may be multiple classes specified.

// <div class="class1 class2"></div>
$.el(".class1.class2");

Attributes

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

Text must be surrounded by {}. Multiple text nodes will be appended.

// <div>Hello World!</div>
$.el("{Hello World!}");
$.el("{Hello}{ World!}");

Return Parent

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}");

Advanced

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");

Tests

Run Tests

jquery.el.js's People

Contributors

Stargazers

Watchers

jquery.el.js's Issues

allow escaped start tokens

http://stackoverflow.com/a/12310128/806777

modularize code

2x slower than jquery

console.time("el");
for (let i = 0; i < 10000; i++) {
    const $input = $.el(`textarea#text${i}.text[data-type='text' disabled]{text${i}}`);
}
console.timeEnd("el");
console.time("jquery");
for (let i = 0; i < 10000; i++) {
    const $input = $("<textarea />")
        .attr({
            id: "text" + i,
            "data-type": "text"
        })
        .addClass("text")
        .prop({
            disabled: true
        })
        .text("text" + i);
}
console.timeEnd("jquery");
console.time("dom");
for (let i = 0; i < 10000; i++) {
    const input = document.createElement("textarea");
    input.setAttribute("id", "text" + i);
    input.setAttribute("data-type", "text");
    input.className = "text";
    input.setAttribute("disabled", "disabled");
    input.textContent = "text" + i;
    const $input = $(input);
}
console.timeEnd("dom");

el: 478ms
jquery: 198ms
dom: 72.7ms

We could set the parsed object with vanilla js to cut the time in half but I am not sure we will reduce some functionality or that we need to optimize speed.