Maison > Article > interface Web > Comment ajouter des éléments horizontalement dans une page HTML en utilisant JavaScript ?

Comment ajouter des éléments horizontalement dans une page HTML en utilisant JavaScript ?

WBOYavant: 2023-08-25 10:01:17869parcourir

Nous pouvons utiliser la méthode "createElement" de JavaScript pour créer un nouvel élément. Nous pouvons ensuite ajouter cet élément à l'élément parent de la page HTML en utilisant la méthode "appendChild". Pour positionner un élément horizontalement, nous pouvons utiliser des styles CSS sur l'élément nouvellement créé, tels que "display:inline-block" ou "float:left/right".

Supposons que nous voulions décrire une représentation graphique d'une structure de données de liste chaînée. Chaque fois que l'utilisateur clique sur le bouton, un nouveau nœud (dans notre cas représenté par un cercle vert) doit être ajouté horizontalement au début de la liste des nœuds.

Et le texte à l'intérieur de ce cercle vert devrait être l'index de ce nœud spécifique.

Méthode

La méthode ici est très simple et directe−

Nous allons créer un bouton qui se chargera d'insérer un nouveau nœud.
Chaque fois que vous cliquez sur le bouton, le nombre de nœuds augmente de 1.
Une fonction distincte responsable du rendu du nœud recevra ensuite ce nombre et restituera le nœud.
Pour rendre les nœuds dans l'ordre inverse, nous définissons la propriété flex-direction du div du conteneur sur row-reverse.

Exemple

Voici un exemple fonctionnel complet de cette approche -

<!DOCTYPE html>
<html>
<head>
    <title>Linked List Graphic Representation</title>
      <style>
      #holder {
         display: flex;
         flex-direction: row-reverse;
         align-items: center;
         margin-top: 10px;
         justify-content: flex-end;
         overflow-x: scroll;
      }
      .element{
         border-radius: 50%;
         background: green;
         color: white;
         height: 25px;
         width: 25px;
         display: flex;
         align-items: center;
         justify-content: center;
      }
     </style>
   </head>
   <body>
      <button onclick = "handleInsert()">Insert Node</button>
      <div id = 'holder'></div>
      <script>
         let currentElements = 0; 
         const handleRender = () => {
            const holder = document.getElementById('holder');
            holder.innerHTML = '';
            for (const index in Array(currentElements).fill(null)) {
               const element = document.createElement('div');
               element.innerText = index;
               element.classList.add('element');
               holder.appendChild(element)
            }
         }; 
         const handleInsert = () => {
            currentElements++;
            handleRender();
         };
         handleRender();  
     </script>
   </body>
</html>

La traduction chinoise de

Explication

est :

Explication

Nous avons créé un fichier HTML de base en utilisant JavaScript pour créer une représentation graphique simple d'une liste chaînée. Il comporte un bouton qui, lorsque vous cliquez dessus, appelle une fonction qui insère un nouveau nœud (élément) dans la liste chaînée et met à jour la représentation graphique.

La représentation graphique est créée à l'aide d'un élément div portant le nom de classe "element" et est stylisée en cercle. Les éléments sont affichés dans un conteneur flexible avec l'"id" de "holder", qui est défini sur overflow-x: scroll afin qu'il puisse défiler lorsqu'il y a trop d'éléments dans la fenêtre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html Float 数据结构 display overflow flex

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment supprimer l’extension de fichier d’une chaîne à l’aide de JavaScript ?Article suivant：Comment supprimer l’extension de fichier d’une chaîne à l’aide de JavaScript ?

Articles Liés

Voir plus