Can jQuery create an element by a selector?

Question

Normally I would create an element in jQuery like this $('<div id="errors" class="red"></div>')

Can I create an element given a selector using something like $.create("div#errors.red")? Where that would return a jQuery object representing a div with the id of errors and the class of red?

Answer 1

What you mean is Zen Coding like DOM creation. You can find the syntax of zen coding on the zen coding google project page.

Usage would be:

1. download and add the zen-0.1.a.js file and add it to your homepage

2. add this function to your project

var zen = function(input) {
  return jQuery(zen_coding.expandAbbreviation(input, 'html', 'xhtml'));
};

3. create jQuery dom with:

var dom = zen('div#id.class');
$('body').append(dom);

Answer 2

A Plugin

Below is a plugin I wrote that allows you to create an element, simply adorn it with attributes, and append it to the DOM. Here's an example use of .adorn() with what you wanted to do:

$("<div>").adorn("#errors",".red",">body");

The above creates a div, slaps on an ID and a Class and appends it all to the body. Note that you can add the appendTo syntax in any order, so this will work too:

$("<div>").adorn(">body","#errors",".red");

Simple example page created with adorn.

As opposed to using one continuos string, I found it easier to pass each class, id, value, etc. in as an argument, since that clearly delineates them.

Syntax:

• .blah - adds class blah
• #blah - sets id to blah
• >blah - appends this to blah
• h:blah - sets innerHTML to blah
• v:blah - sets value to blah
• There's 9 options currently
• ... you can easily add new functionality.

Note that when used, the colon, can be any single character, it doesn't have to be a colon, so h-blah would also work.

Other Uses:

The nice thing about this plugin is that it cannot only be used to adorn newly created elements, but it can also be used to adorn existing elements. For example to add 3 classes and set the HTML for all divs on a page:

$("div").adorn(".one",".two",".three","h:blah");

jsFiddle example

Finally, if you accidentally pass in the wrong label. An error class is added to the element to ease debugging, but things will not break.

How it Works:

The heart of this plugin is making use of the automatically available arguments array to hold all the passed in options. The options are parsed using a switch statement and the substring method.

The plugin:

(function( $ ){
    jQuery.fn.adorn = function () {
          // Get the arguments array for use in the closure
        var $arguments = arguments;
          // Maintain chainability
        return this.each(function () {
            var $this = $(this);
            $.each($arguments, function(index, value) {
                  // These are just the options that quickly came
                  //   to mind, you can easily add more.
                  // Which option is used depends on the first
                  //   character of the argument passed in. The 2nd
                  //   char is sometimes used and sometimes ignored.
                switch (value.substring(0,1)) {
                    case "#":
                        $this.attr("id",value.substring(1));
                    break;
                    case ".":
                        $this.addClass(value.substring(1));
                    break;
                    case ">":
                        $this.appendTo(value.substring(1));
                    break;                          
                    case "a":
                        $this.attr("alt", value.substring(2));
                    break;
                    case "h":
                        $this.html(value.substring(2));
                    break;
                    case "i":
                        $this.attr("title", value.substring(2));
                    break;
                    case "s":
                        $this.attr("src", value.substring(2));
                    break;
                    case "t":
                        $this.attr("type", value.substring(2));
                    break;
                    case "v":
                        $this.attr("value", value.substring(2));
                    break;
                    default:
                          // if the wrong key was entered, create
                          // an error class.
                        $this.addClass("improper-adorn-label");
                }
            });
        });
    };
})( jQuery );