Chargement...

jQuery DOM manipulation


Récupérer le contenu d'un élément

On peut récupérer le contenu d'un élément à l'aide des méthodes jQuery .html() et .text()

Exemple:
<div id="main">Bonjour je suis <b>batman</b></div>
<script type="text/javascript">
alert( $("#main").html() );
/* Retourne Bonjour je suis <b>batman</b> */
alert( $("#main").text() );
/* Retourne Bonjour je suis batman */
</script>

Remplacer le contenu

Pour remplir un élément, il faut utiliser la méthode .html()
<div id="main">Bonjour je suis <b>batman</b></div>
<script type="text/javascript">
$("#main").html("Il était une fois ");
</script>
Résultat:
<div id="main">Il était une fois</div>

Ajouter du contenu

Il est possible d'ajouter du contenu à un élément grâce à la méthode .append()
<div id="main">Il était une fois</div>
<script type="text/javascript">
$("#main").append(" un enfant qui aimait le chocolat");
</script>
Résultat:
<div id="main">Il était une fois un enfant qui aimait le chocolat</div>
Il existe une autre syntaxe pour ajouter du contenu: .appendTo()
<div id="main">Il était une fois</div>
<script type="text/javascript">
$( " un enfant qui aimait le chocolat" ).appendTo( "#main" );
</script>
Résultat:
<div id="main">Il était une fois un enfant qui aimait le chocolat</div>

Ajouter du contenu au début de l'élément

Il est possible d'ajouter du contenu au début d'un élément grâce à la méthode .prepend()
<div id="main">Il était une fois</div>
<script type="text/javascript">
$("#main").prepend("un enfant qui aimait le chocolat ");
</script>
Résultat:
<div id="main">un enfant qui aimait le chocolat Il était une fois</div>
Il existe une autre syntaxe pour cette action:
<div id="main">Il était une fois</div>
<script type="text/javascript">
$("un enfant qui aimait le chocolat ").prependTo("#main");
</script>
Résultat:
<div id="main">un enfant qui aimait le chocolat Il était une fois</div>

Supprimer un élément

<script type="text/javascript">
/* Supprime toutes les balises <li> du document */
$("li").remove();
</script>

Vider un élément

<script type="text/javascript">
/* Vide toutes les balises <li> du document */
$("li").empty();
</script>

Remplacer un élément

<script type="text/javascript">
/* Remplace les balises <li> par <a>Lien</a> */
$("li").replaceWith( $("<a>Lien</a>") );
</script>

Envelopper un élément

<script type="text/javascript">
/* Envelopper les balises <a> par des balises <li> */
$("menu a").replaceWith( $("<li />") );
</script>

Ecrire après un élément

<script type="text/javascript">
/* Ajoute la balise <span> juste après le footer */
$("footer").after("<span>Lien 1</span>");
</script>

Ecrire avant un élément

<script type="text/javascript">
/* Ajoute la balise <span> juste avant le footer */
$("footer").before("<span>Lien 2</span>");
</script>

Modifier les attributs

<script type="text/javascript">
/* Récupère la valeur de la balise href */
var href = $("a").attr("href");
/* Modifie la valeur de la balise href */
$("a").attr("href", "http://creersonsiteweb.net");
</script>



UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW