FAQ jQuery
FAQ jQueryConsultez toutes les FAQ
Nombre d'auteurs : 12, nombre de questions : 46, dernière mise à jour : 15 juin 2021
Sommaire→Utilisation du DOM- Comment puis-je sélectionner un élément à l'aide d'une classe ou d'un id ?
- Comment puis-je vérifier si un élément a une classe en particulier ?
- Comment puis-je vérifier si un élément existe ?
- Comment puis-je déterminer si un élément est visible ou non ?
- Comment puis-je gérer les attributs booléens ?
- Comment puis-je remplacer une partie du texte d'un ou de plusieurs éléments dans une liste d'éléments ?
- Comment puis-je changer l'ordre des éléments d'une liste ?
- Est-il toujours utile de tester la longueur d'un sélecteur jQuery ?
- Quelle différence y a-t-il entre $(...)[0] et $(...).eq(0) ?
- Comment puis-je réaliser une itération en jQuery ?
- Comment puis-je manipuler plusieurs attributs d'un élément du DOM en même temps ?
- Comment puis-je établir un lien permanent entre deux éléments du DOM ?
- Comment puis-je créer un nouvel élément du DOM ?
[jQuery 1.4.2]
Ce code sélectionne un élément d'id "monID" :
$("#monID");Un id doit être unique !
Ce code sélectionne tous les éléments ayant la classe "maClasse" :
$(".maClasse");
Habituellement, les éléments sélectionnés sont utilisés par d'autres fonctions jQuery :
// récupère la valeur d'un élément input ou select
var myValue = $("#monID").val();
// définit la valeur d'un élément input ou select
$("#monID").val("Bonjour");[jQuery 1.4.2]
Vous pouvez utiliser la fonction hasClass() ou la fonction is().
Exemple n° 1
Si l'élément d'id "monID" a la classe "maClasse" alors le montrer
en passant la propriété CSS display de none à bloc :
Exemple n° 2
Lors d'un clic sur une division, si la division a la classe "maClasse" alors
colorer le texte en rouge et animer la division en l'agrandissant vers la gauche
de 100px puis en la diminuant vers la droite de 100px.
$("div").click(function(){
// Pour accélérer le traitement de la fonction.
// Le traitement d'un sélecteur est une opération coûteuse.
var obj = this;
if (obj.hasClass("maClasse")){
obj
.css("color","red")
.animate({left: "+=100px"}, "slow")
.animate({left: "-=100px"}, "slow");
}
});
La durée de cette animation est réglée par le paramètre slow qui
pourrait être remplacé par une durée exprimée en millisecondes, par exemple :
.animate({left: "-=100px"}, 3000);[jQuery 1.5]
Un sélecteur retourne toujours un objet jQuery, c'est la raison pour laquelle on peut
chaîner les instructions.
Mais un sélecteur peut être traité comme un tableau (array) pour retrouver l'élément
du DOM et on peut donc vérifier de combien d'éléments il est composé.
Exemple : si le nombre d'éléments du DOM ayant la classe "maClasse" est positif,
ajoutez à ces éléments la classe "monAutreClasse".
if ($(".maClasse").length > 0){
$(".maClasse").addClass(".monAutreClasse");
}
On peut sélectionner un élément par son numéro d'index.
Exemple : retrouver le type de l'élément DOM, ici [object HTMLDivElement]
Si l'élément n'existe pas, jQuery ne fait rien et aucune erreur n'est signalée.
[jQuery 1.4.2]
Le sélecteur :hidden sélectionne tous les éléments qui sont cachés.
Le sélecteur :visible sélectionne tous les éléments qui sont visibles.
Exemple : sélectionner tous les éléments :hidden ayant la classe
"maClass" et changer la taille du texte contenu dans ces éléments.
$(".maClass:hidden").css("fontSize", "2.4em");Nota Bene :
Pour améliorer la rapidité d'exécution, la définition d'un élément visible ou caché
a été profondément modifiée.
Avant jQuery 1.3.2, un élément est visible si la propriété CSS display
n'est pas none, si la propriété CSS visibility
n'est pas hidden, et son type (input) n'est pas hidden.
En jQuery 1.3.2 et après, un élément est visible si la propriété offsetWidth
ou la propriété offsetHeight est supérieure à 0.
Les éléments sont considérés :hidden pour plusieurs raisons :
- ils ont une valeur d'affichage nulle ;
- ils sont des éléments de formulaire de type hidden ;
- leur largeur et leur hauteur sont explicitement mises à 0 ;
- un élément ancêtre est caché, l'élément n'est pas affiché sur la page ;
- un élément est supposé être caché si lui ou l'un de ses parents ne consomme pas d'espace dans le document.
La propriété CSS visibility n'est donc pas prise en compte,
car l'élément consomme de l'espace dans le document.
alert($(this).css("visibility", "hidden").is(":hidden"));Cette alerte retourne false !
[jQuery 1.6]
On doit distinguer les attributs, qui sont du code HTML, d'avec les propriétés du DOM portant le même nom.
Liste des propriétés pour les attributs booléens
checked (input type=checkbox/radio)
selected (option)
disabled (input, textarea, button, select, option, optgroup)
readonly (input type=text/password, textarea)
multiple (select)
Pour construire ou gérer un attribut HTML, on doit utiliser la méthode attr() :
http://api.jquery.com/attr/attribut
Pour construire ou gérer une propriété du DOM, on doit utiliser la méthode prop() :
http://api.jquery.com/prop/propriété
Désactiver les éléments "button" :
$("button").prop("disabled",true);
Activer les éléments "input" :
$("input").prop("disabled", false);
Autoriser le choix multiple dans un élément "select" d'ID "selectSpec" :
$("#selectSpec").prop("multiple", true);[jQuery 1.4.2]
La liste d'éléments :
<ul id="maListeID">
<li><a href="#signet1">liste, item 1</a></li>
<li><a href="#signet2">liste, item 2</a></li>
<li><a href="#signet3">liste, item 3</a></li>
<li><a href="#signet4">liste, item 4</a></li>
<li><a href="#signet5">liste, item 5</a></li>
</ul>
Exemple 1
On crée un objet jQuery qui représente, dans la liste d'id maListeID,
les éléments enfants a du troisième élément li.
var obj = $("#maListeID").children("li").eq(2).children("a");
Le texte de l'objet est remplacé par le texte modifié, replace()
est une fonction JavaScript.
obj.text(obj.text().replace("liste", "liste de signets"));
Exemple 2
On crée un objet jQuery qui représente, dans la liste d'id maListeID,
les éléments enfants a des éléments li n° 4 et 5.
var obj = $("#maListeID").children("li:gt(2)").children("a");
Le texte de chaque objet est remplacé par le texte modifié
$.each(obj, function(i, item){
$(item).text($(item).text().replace("item","élément n°"));
});
On peut également l'écrire sous cette forme :
$("#maListeID").children("li:gt(2)").children("a").each(function(i, item){
$(item).text($(item).text().replace("item","élément n°"));
});
Description des sélecteurs
- .children() -- cherche parmi les enfants de l'élément parent (un niveau du DOM)
- .find() -- cherche parmi les descendants de l'élément parent (plusieurs niveaux du DOM)
- .eq(n) ou :eq(n) -- sélectionne l'élément numéro n (base zéro)
- .eq(-n) ou :eq(-n) -- sélectionne l'élément numéro length-n (base zéro)
- .first() ou :first -- idem eq(0)
- .last() ou :last -- idem eq(-1)
- :even -- sélectionne les éléments impairs : 1, 3, 5, 7, ...
- :odd -- sélectionne les éléments pairs : 2, 4, 6, 8, ...
- :gt(n) -- sélectionne tous les éléments supérieurs à n (base zéro)
- :lt(n) -- sélectionne tous les éléments inférieurs à n (base zéro)
- :nth-child(n) -- sélectionne l'élément numéro n (base un)
- :first-child -- idem :nth-child(1) sélectionne l'élément numéro 1 (base un)
- :last-child -- idem :nth-child(length) sélectionne l'élément numéro length (base un)
- :only-child -- sélectionne l'élément unique ou rien si l'élément parent a plusieurs enfants
Nota Bene :
- Pour un DOM complexe, vous pouvez accélérer votre programme en utilisant le sélecteur de recherche approprié, par exemple children au lieu de find.
- Évitez d'écrire un sélecteur abrégé, exemple $("#maListeID li:eq(2) a"). Depuis la version 1.4.0, jQuery transforme un sélecteur abrégé en « forme longue » avant de l'exécuter, soit une perte de temps et une source d'erreur.
[jQuery 1.5]
Exemple avec une liste de sélection multiple et en utilisant appendTo(),
insertAfter(), insertBefore() et clone() :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
#selectID {
width: 200px;
}
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<div id="conteneur">
<select id="selectID" multiple="multiple" size="4">
<option value="opt 1">Option n° 1</option>
<option value="opt 2" selected="selected">Option n° 2</option>
<option value="opt 3">Option n° 3</option>
<option value="opt 4">0ption n° 4</option>
<option value="opt 5" selected="selected">Option n° 5</option>
<option value="opt 6">Option n° 6</option>
</select>
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
/*
* Pour parcourir tous les éléments de la liste
*/
var selectList = function(id){
$("#"+id).children("option").each(function(i, item){
console.log($(item).val(), $(item).text());
});
};
/*
* Pour parcourir tous les éléments sélectionnés de la liste
*/
var selectedList = function(id){
$("#"+id).children("option:selected").each(function(i, item){
console.log($(item).val(), $(item).text());
});
};
$(function(){
selectList("selectID");
var obj = $("#selectID");
// déplacer le premier élément en dernière position
obj.children("option:first").appendTo(obj);
// déplacer le premier élément en troisième position
obj.children("option:first").insertAfter(obj.children("option").eq(2));
// copier le cinquième élément en première position
obj.children("option:eq(4)").clone().insertBefore(obj.children("option:first"));
// modifier la valeur de l'élément cloné
obj.children("option:first").val("opt 7");
console.log("------------------");
selectList("selectID");
});
</script>
</body>
</html>clone(true) permet de copier la totalité des données (data) et
des événements associés à un élément du DOM.
Remarque à ce propos iciremarque clone.
[jQuery 1.4.4]
Exemple :
if ($(".maclasse").length > 0) {
$(".maclasse").css('color','blue');
}
Pour cet usage, non ! Le sélecteur est un objet jQuery qui peut être manipulé
comme un "array" d'objets. Si le tableau est vide, jQuery n'exécute pas la méthode
demandée.
Il suffit donc d'écrire :
$(".maclasse").css('color','blue');[jQuery 1.4.4]
La différence est très importante et elle est souvent mal comprise.
Un sélecteur retourne toujours un objet jQuery, c'est la raison pour laquelle on
peut chaîner les instructions.
Mais un sélecteur peut être traité comme un tableau (array) pour retrouver l'élément
du DOM et, par exemple, utiliser les propriétés et méthodes du JavaScript qui n'ont
pas d'équivalent dans le langage jQuery.
Exemple :
<select id="choix">
<option value="1" selected="selected">Choix n° 1</option>
<option value="2">Choix n° 2</option>
<option value="3">Choix n° 3</option>
<option value="4">Choix n° 4</option>
<option value="5">Choix n° 5</option>
</select>$(function(){
// Nous utiliserons Firebug pour examiner le résultat de nos codes
// $(...) = [object Object]
console.log("$(...) = " + $("#choix"));
// $(...).eq(0) = [object Object]
console.log("$(...).eq(0) = " + $("#choix").eq(0));
// $(...)[0] = [object HTMLSelectElement]
console.log("$(...)[0] = " + $("#choix")[0]);
$("#choix").children().eq(2).css("color", "red");
// $("#choix").children().eq(2) = [object Object]
console.log('$("#choix").children().eq(2) = ' + $("#choix").children().eq(2));
// eq(2) est la troisième option, valeur 3
console.log($("#choix").children().eq(2).val());
// $("#choix").children()[4] = [object HTMLOptionElement]
console.log('$("#choix").children()[4] = ' + $("#choix").children()[4]);
// $("#choix").children()[4].tagName = OPTION
console.log('$("#choix").children()[4].tagName = ' + $("#choix").children()[4].tagName);
// $("#choix").children().eq(4).tagName = undefined
// undefined car l'objet jQuery n'a pas une propriété tagName
console.log('$("#choix").children().eq(4).tagName = ' + $("#choix").children().eq(4).tagName);
});[jQuery 1.4.3]
1) En utilisant each()
Cette méthode parcourt tous les éléments d'une sélection, et exécute une fonction
pour chacun d'eux. La fonction reçoit automatiquement l'index de l'élément courant
et l'élément DOM lui-même comme arguments.
On peut dénommer l'index et l'élément du DOM comme l'on veut. Personnellement je
respecte la convention suivante : i, j, k, m, et n pour l'index ; item, jtem, ktem,
mtem, ntem pour l'élément du DOM. Je retrouve ainsi plus facilement qui est quoi
et à quel niveau il se situe dans les itérations imbriquées.
$("p").each(function(i, item) {
console.log(i, item);
});
$("p").each() parcourt les éléments du DOM qui font partie du
sélecteur jQuery. La fonction de rappel est lancée dans le contexte de l'élément
DOM en cours, de sorte que le mot-clé this fait référence à l'élément.
Lorsqu'une condition est remplie, vous pouvez sortir de l'itération par un
return false;.
Un return true; est équivalent à l'instruction "continue" dans
une boucle for, on passe immédiatement à l'itération suivante.
$("p").each(function(i, item) {
if (i > 20){
return false;
} else {
console.log(i, item);
}
});
2) $.each(collection, function(i, item){ ... });
Cet itérateur générique peut être utilisé sur des objets et des tableaux.
Les tableaux et les objets de type tableau sont parcourus en suivant l'index,
de 0 à length-1.
$.each([52, 97], function(i, item) {
console.log(i, item);
});
Les autres objets sont parcourus en suivant l'ordre de leurs propriétés nommées.
var map = {
'flammable': 'inflammable',
'duh': 'no duh'
};
$.each(map, function(key, value){
console(key, value);
});
3) Exemples
Exemple 1 :
var chaine ="un;deux;trois;quatre;cinq;six"
var tab = chaine.split(';')
$.each(tab, function(i, item){
console.log(i, item);
});
Exemple 2 :
var obj = {
un:{
en:'one',
de:'ein'
},
deux:{
en:'two',
de:'zwei'
},
trois:{
en:'three',
de:'drei'
}
};
$.each(obj, function(i, item){
console.log(i, item.en, item.de);
});
Exemple 3 :
var doo = {
truc: function(param){
console.log(param);
},
machin: function(param){
console.log("encore\n" + param);
}
};
$.each(doo, function(i, item){
console.log(i, item);
item("bonjour");
});
Exemple 4 :
var doo = {
jules: function(key, param){
console.log(param + ' ' + key);
},
roger: function(key, param){
console.log(param + '\n' + key);
}
};
$.each(doo, function(i, item){
console.log(i, item);
item(i, 'bonjour');
});
Exemple 5 :
var b = {
one: 1,
two: 2,
three: 3
};
// On ajoute les méthodes getFirst et getLast à l'objet b
$.each(["First", "Last"], function(i, item) {
b["get" + item] = function() {
console.log(this[(item == "First") ? "one" : "three"]);
};
});
b.getFirst(); // alert 1
b.getLast(); // alert 3
console.log(b);[jQuery 1.5]
Exemple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
/* Base */
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* Test */
a {
display:block;
width:300px;
height:20px;
margin-bottom:6px;
}
a.principale {
background-color:lightyellow;
}
</style>
</head>
<body>
<h1>FAQ jQuery</h1>
<div id="conteneur">
<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(function(){
$("#conteneur a:eq(2)").attr({
"id": "juliaID",
"class": "principale",
"target": "_blank",
"href": function(){
var obj = $(this);
obj.text("Les ensembles de Julia en JavaScript !");
return obj.attr("href") + "/bacasable/julia.php";
},
"title": "Pour le fun !",
"alt": "Les ensembles de Julia en JavaScript !"
});
});
</script>
</body>
</html>[jQuery 1.5]
On peut utiliser les événements, un élément du DOM attendant l'événement déclenché
par un autre élément du DOM.
Mais on peut stocker la référence d'un élément du DOM dans les données d'un autre
élément du DOM
Exemple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
/* Base */
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* Test */
div.exemple {
width:100px;
height:100px;
margin:12px;
margin-top:400px;
padding:6px;
background-color:yellow;
border:1px solid gray;
}
li.exemple {
display:block;
width:100px;
height:100px;
margin:12px;
padding:6px;
background-color:lightgreen;
border:1px solid grey;
}
form {
background-color:red;
}
</style>
</head>
<body>
<h1>FAQ jQuery</h1>
<div id="conteneur">
<ul>
<li class="exemple">Liste n° 1</li>
<li class="exemple">Liste n° 2</li>
<li class="exemple">Liste n° 3</li>
<li class="exemple">Liste n° 4</li>
<li class="exemple">Liste n° 5</li>
</ul>
<div class="exemple">Division n° 1</div>
<div class="exemple">Division n° 2</div>
<form>
<p>Un mot pour remplir</p>
<div class="exemple">Division n° 3</div>
</form>
<div class="exemple">Division n° 4</div>
<div class="exemple">Division n° 5</div>
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(function(){
var temp = [];
var obj = $("#conteneur");
obj.find("div").each(function(i, item){
temp.push($(item));
});
obj.find("li").each(function(i, item){
// au cas où il n'y aurait pas le même nombre de chaque type d'élément !
if (temp.length > 0){
$(item)
// retire le premier élément de temp
.data("division", temp.shift())
.click(function(){
// avec animation 1,5s
$("html, body")
.animate({
"scrollTop": $(this).data("division").position().top
}, 1500);
// sans animation
/*
$("html, body")
.scrollTop($(this).data("division").position().top);
*/
});
}
});
});
</script>
</body>
</html>
[jQuery 1.4.2]
$(elementVide, objetJSON).appendTo(selecteurJQuery);
$("<div/>", { id:"maDivID" }).appendTo("#conteneur");La construction débute obligatoirement par un élément vide, on ne peut pas écrire :
<div id="monID"/>
Cette technique est particulièrement utile lors de l'écriture de plug-ins ou de widgets,
et pour ajouter un fragment au DOM lorsque son existence ou son contenu est
conditionné par le résultat d'un script.
Exemple 1
Ajoutez une nouvelle division d'id maDivID, avec la classe maClass
et l'attribut title. Cette division doit réagir au clic et au survol
du pointeur.
.maClass {
color:black;
}
var str = "<p>Un mot pour remplir.</p>";
$("<div/>",{
id:"maDivID",
"class":"maClass",
title:"Ma nouvelle division est géniale !",
html:str,
css:{
margin:"12px",
padding:"6px",
fontSize:"2em",
backgroundColor:"#ced0d7",
border:"1px solid gray",
cursor:"pointer"
},
click:function(event){
alert(new Date(event.timeStamp));
},
mouseenter:function(){
$(this).css("color","red");
},
mouseleave:function(){
$(this).css("color","black");
}
}).appendTo("#conteneur");
Exemple 2
Construire des fragments du DOM à partir d'un assemblage d'objets JSON.
$(elementVide, $.extend(true, {}, obj1, obj2)).appendTo(selecteurJQuery);
$.extend()extend
permet de fusionner le contenu de deux ou de plusieurs objets en modifiant
l'objet cible ou en créant un nouvel objet.
var obj1 = {
html:"<p>Un mot pour remplir</p>",
css:{
margin:"12px",
padding:"6px",
fontSize:"2em",
backgroundColor:"#ced0d7",
border:"1px solid gray",
cursor:"pointer"
}
};
var obj2 = {
id:"monID1",
click:function(event){
alert(new Date(event.timeStamp));
}
};
var obj3 = {
id:"monID2",
mouseenter:function(){
$(this).css("color","red");
},
mouseleave:function(){
$(this).css("color","black");
}
};
$("<div/>", $.extend(true, {}, obj1, obj2)).appendTo("#conteneur");
$("<div/>", $.extend(true, {}, obj1, obj3)).appendTo("#conteneur");Avec cette technique, le risque d'obtenir plusieurs fragments du DOM ayant le même ID n'est pas négligeable. Vérifiez toujours que le nouveau fragment du DOM correspond bien à vos souhaits.
Exemple 3
Construire un formulaire en fragmentant la construction jusqu'à l'excès.
function soumettre(){
alert("Identifiant = " + $("#nameID").val() + "\nMot de passe = " + $("#passwordID").val());
}
var nameLabel = $("<label/>",{
html: "Identifiant :",
css:{
margin: "12px"
}
});
var nameInput = $("<input/>",{
type: "text",
css:{
margin: "12px",
marginBottom: "24px",
width: "300px"
},
change:function(){
var obj = $(this);
if (obj.val().length < 8){
alert("Votre identifiant doit comporter plus de 8 caractères !");
obj.val("");
}
}
});
var passwordLabel = $("<label/>",{
html: "Mot de passe :",
css:{
margin: "12px"
}
});
var passwordInput = $("<input/>",{
type: "password",
css:{
margin: "12px",
width: "300px"
},
change:function(){
var obj = $(this);
if (obj.val().length < 8){
alert("Votre mot de passe doit comporter plus de 8 caractères !");
obj.val("");
}
}
});
var submitBtn = $("<input/>",{
type: "submit",
css:{
margin: "12px",
width: "300px"
},
click:function(){
var boolOK = true;
$(nameInput).change();
$(passwordInput).change();
var name = $(nameInput).val();
var password = $(passwordInput).val();
if ((name.length < 8) || (password.length < 8)){
boolOK = false;
}
return boolOK;
}
});
$("<form/>",{
action:"javascript:soumettre();",
css:{
marginTop: "12px"
}
}).append(nameLabel, "<br/>", nameInput, "<br/>", passwordLabel, "<br/>",
passwordInput, "<br/>", submitBtn).appendTo("#conteneur");
$(nameInput).focus();
Nota Bene : cet exemple permet d'ajouter un formulaire au DOM, mais
l'utilisation de la transaction AJAX load est beaucoup plus rapide.
$("#conteneur").load("monFormulaire.html");