jQuery: creating new tags

We’ve seen that we can select existing elements on a web page in many ways using the $(selectorsyntax, where ‘selector’ can take on any of the many forms we’ve seen in earlier posts. The $() syntax can also be used to create new HTML which can then be inserted into your document.

To do this, simply put the desired HTML (enclosed in quotes) directly as the argument. Thus $(‘<input type=text/>’) creates a new text input box.

Merely creating a new object does not, however, insert it into the document. To do that, you need to use a method such as appendTo(). Thus  $(‘<input type=text/>’).appendTo(‘body’) will add the text box to the end of the body, so that it appears at the bottom of the page.

The easiest way of trying this feature out is to load a page (such as the one we’ve been using for examples up to now) that uses jQuery into a browser such as Chrome that has a console, and then typing some commands into the console. The results should be instantly visible on the page.

That’s about all there is to say about the single-argument method of creating HTML. There is, though, another version, in which a second argument can be passed. This second argument allows attributes to be specified.

It’s true that we could just include all the attributes in the raw HTML in the first argument, but it’s sometimes cleaner and easier to read if we can lay out the attributes more explicitly.

For example, we could create a new text input as follows:

$('<input />',
  {
    type: 'text',
    title: 'A test text box',
    click: function () {
      alert($(this).attr('title'));
    },
    css: {
      backgroundColor: 'peachpuff',
      border: '2px dotted red'
    }
  }).appendTo('body');

We’ve moved the ‘type’ attribute to the second argument, and added a ‘title’ (which is displayed as a tooltip when the mouse hovers over the text box). We’ve also added an event handler for a mouse click, which just displays an alert box containing the title. (It’s probably more conventional to add the event handler using a method, but putting it in the attribute list is perfectly valid.)

We’ve also added a couple of style properties in the css attribute. The css attribute is a bit odd in that it gets translated to a ‘style’ attribute in the HTML, and some of the attribute names get changed. For example, the css ‘backgroundColor’ is changed to ‘background-color’ in the style. You can, if you like, specify the ‘style’ attribute explicitly in the jQuery, but you’ll have to use the style names instead of the css names, and put the whole set of styles into a single string. The above example would be written:

$('<input />',
  {
    type: 'text',
    title: 'A test text box',
    click: function () {
      alert($(this).attr('title'));
    },
    style: 
      'background-color: peachpuff; border: 2px dotted red' 
 }).appendTo('body');
Advertisements
Post a comment or leave a trackback: Trackback URL.

Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: