Lancez Notepad ou tout autre éditeur HTML.
Ouvrez un de vos documents HTML et collez ce code partout dans le "corps" section du document:
div 1
div2
Cela crée deux éléments div. Le premier div, dont l'ID est "div1," fait référence à un nom de classe CSS "vert" tandis que le second div - "div2" - Se réfère à une classe nommée "jaune." Le bouton sur la dernière ligne appelle la "moveDiv" Fonction javascript qui déplace le premier div dans la deuxième div.
Collez ce code dans le "tête" section du document:
.jaune {background-color: jaune}
.vert {background-color: largeur serre: 50px-}
Voici les "jaune" et "vert" les classes référencées par les éléments div. Chacun crée une couleur de fond différente pour le conteneur div qui l'appelle.
Ajouter le code javascript suivant ci-dessous la clôture "style" balise dans votre document:
La "moveDiv" fonction obtient une référence à la première div et le déplace dans la seconde div par l'exécution de la "ajouter enfants" Procédé. Cette méthode javascript utile vous permet de repositionner les éléments div et ajouter de nouveaux éléments div enfant à ceux qui existent déjà.
Enregistrez votre document HTML modifié et l'afficher dans un navigateur. Vous verrez un div verte courte (de div1) sur la première ligne et une longue div jaune (de div2) sur la deuxième ligne.
Clique le "Déplacez Div" bouton. Lorsque le code javascript est exécuté, il déplace le premier div dans le second. Parce que les éléments div ont des couleurs différentes, vous pouvez voir que "div1" est à l'intérieur "div2."