jQuery Plugin to Dynamically Create HTML DOM Elements - jQuery Element

jQuery Element is a fancy jQuery plugin that allows you or your visitor to dynamically create HTML DOM elements without any server-side code. For example, with this plugin you can create a todo list on your web page for adding new todo items.

Basic Usage (Create a editable todo list):

1. Include jQuery library and jQuery Element on your web page

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../jquery.element.js" type="text/javascript"></script>

2. The CSS

<style>
.todos {
padding: 10px;
position: absolute;
right: 5px;
background-color: yellow;
width: 400px;
}
</style>

3. The javascript

<script type="text/javascript">
$(function () {

// Handy abbreviation
var el = $.element;

// Showcase static

el.div({ className: 'control-group' },
  el.label({ className: 'control-label', htmlFor: 'inputEmail' },
'Email'
  ),
  el.div({ className: 'controls' },
el.input({ type: 'text', id: 'inputEmail', placeholder: 'Email' })
  )
).appendTo($('body'));

var todosList, newTodoInput;

el.div({className:'todos'},
  el.h3('Todos').css('color','brown'),
  todosList=el.ul(),
  'New todo:',
  newTodoInput = el.input({ type: 'text', placeholder:'What should we do?' }),
  el.button('Add')
.click(function () {
  el.li(newTodoInput.val()).appendTo(todosList);
  newTodoInput.val('').focus();
})
).appendTo($('body'));

});
</script>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.