Ajouter ou déplacer un élément

Pour les exemples, nous utiliserons cette source html :

1
<ul>
2
  <li>liste0</li>
3
  <li>liste1</li>
4
  <li>liste2</li>
5
</ul>
6
<ul>
7
</ul>

Méthodeappend

1
$(all).append(all);

Coupe un objet du DOM et le copie comme dernier enfant de la partie DOM spécifiée par l'objet jQuery.

Dans le cas d'un htmlString c'est une création d'objet.

1
$("ul").append("<li>liste3<li>");

Ajoute un LI aux UL.

1
<ul>
2
  <li>liste0</li>
3
  <li>liste1</li>
4
  <li>liste2</li>
5
  <li>liste3</li>
6
</ul>
7
<ul>
8
  <li>liste3</li>
9
</ul>
1
$("ul").append($("li").eq(1));

Coupe le deuxième LI et le copie comme dernier enfant de chaque UL.

1
<ul>
2
  <li>liste0</li>
3
  <li>liste2</li>
4
  <li>liste3</li>
5
  <li>liste1</li>
6
</ul>
7
<ul>
8
  <li>liste3</li>
9
  <li>liste1</li>
10
</ul>

MéthodeappendTo

1
$(all).appendTo(all);

appendTo est équivalent à append avec les paramètres dans le sens contraire.

1
$(A).append(B);
2
$(B).appendTo(A);

exemple :

1
$("ul").append($("li").eq(1));
2
$("li").eq(1).appendTo("ul");

Méthodeprepend

1
$(all).prepend(all);

Coupe un objet du DOM et le copie comme premier enfant de la partie DOM spécifiée par l'objet jQuery.

Dans le cas d'un htmlString c'est une création d'objet.

1
$("ul").prepend("<li>liste3<li>");

Ajoute un LI aux UL.

1
<ul>
2
  <li>liste3</li>
3
  <li>liste0</li>
4
  <li>liste1</li>
5
  <li>liste2</li>
6
</ul>
7
<ul>
8
  <li>liste3</li>
9
</ul>

Méthodeafter, before

1
$(all).after(all);

Coupe un objet du DOM et le copie comme premier frère de la partie DOM spécifiée par l'objet jQuery.

Dans le cas d'un htmlString c'est une création d'objet.

1
$(all).before(all);

Coupe un objet du DOM et le copie avant comme frère de la partie DOM spécifiée par l'objet jQuery.

Dans le cas d'un htmlString c'est une création d'objet.

MéthodeinsertAfter, insertBefore

1
$(all).insertAfter(all);

inserAfter est équivalent à after avec les paramètres dans le sens contraire.

1
$(A).after(B);
2
$(B).insertAfter(A);
3
$(all).insertBefore(all);

insertBefore est équivalent à before avec les paramètres dans le sens contraire.

1
$(A).before(B);
2
$(B).insertBefore(A);