Livre
Référence
Tutos
Scripts
Forums
FAQ
Tools
IA
TJS
Référence du JavaScript
HTMLElement
appendChild()
Méthode :
HTMLElement
.
appendChild
()
Ajoute l'élément HTML enfant à la fin d'un élément parent
Syntaxe
parent.appendChild(HTMLElement enfant)
Compatible tous navigateurs
Oui
Oui
Oui
Oui
Oui
Oui
Oui
Description
Ajoute l'élément HTML
enfant
en dernière position de l'élément
parent
.
L'élément
enfant
peut se créer avec
createElement()
.
La méthode opposée
removeChild()
retire l'élément
enfant
de
parent
.
La méthode
insertBefore()
permet d'ajouter un nouvel élément dans un élément
parent
à une position donnée dans la hiérarchie des noeuds enfants.
Equivalent dans d'autres langages
Equivalent en
jQuery
à
$.append()
:
Insère du contenu dans un élement.
Exemple 1 : Ajout d'éléments dans un div
Code source
<style
type=
"text/css"
>
div#parent
,
div#parent div
{
border
:
1
px
solid
#999
;
margin
:
4
px
;
}
</style>
<div
id=
"parent"
>
Div parent
</div>
<script>
var
p
=
document
.
getElementById
(
"parent"
);
for
(
var
i
=
1
;
i
<
=
10
;
i
++)
{
var
e
=
document
.
createElement
(
"div"
);
e
.
innerHTML
=
"Element n°"
+
i
;
p
.
appendChild
(
e
);
}
</script>
Résultat
Div parent
Emulation de la console
Explication
Ajoute 10 éléments div sur le div
#parent
.
Page en rapport
Introduction au DHTML
Page mise à jour le
29/07/2018
Troisième édition Tout JavaScript chez Dunod
En savoir plus
Sortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligne
Dunod
Fnac
Amazon
Chercher une fonction, un objet, ...
Le graph des objets Javascript
Chargement
en cours...
Le 01/05/2025 08:23:25 sur php 7 en 41.19 ms