Créer des éléments du DOM avec jQuery 1.4

Sous Prototype (JavaScript), j'aimais bien la fonctionnalité de créer des éléments du DOM par programmation. Pour le faire, on doit utiliser l'objet Element :

document.observe('dom:loaded', onLoad);

function onLoad(){
  var link = new Element('a', {
     id: 'c18_link',
     href: 'http://code18.blogspot.com',
     title: 'Code 18',
     ref : 'external'
 }).update('Blogue de Code 18');

  // ajouter à l'intérieur d'un div défini
  $('divMain').insert(link);
}

La nouvelle version 1.4 de jQuery est sortie cette semaine et la librairie offre maintenant un moyen convivial de faire l'équivalent :

$(document).ready(function(){
  var link = $('<a>', {
      id: 'c18_link',
      href: 'http://code18.blogspot.com',
      title: 'Code 18',
      rel: 'external',
      text: 'Blogue de Code 18'
  });

  $('#divMain').html(link);
});

Dans les deux cas le résultat généré sera :

<a id="c18_link" href="http://code18.blogspot.com/" title="Code 18" rel="external">Blogue de Code 18</a>

Notez la différence sur la façon d'initialiser le libellé du lien (entre les balises <a></a>).

Et comme les appels aux fonctions de jQuery sont enchainables une après l'autre, on peut du même coup passer des attributs CSS :

$('#divMain').html(link).css(
   {
       'font-weight':'bold',
       'font-size':'22px'
   }
);

Bref, des améliorations très intéressantes du côté de jQuery.