Heim > Artikel > Web-Frontend > Wie füge ich mit JavaScript Elemente horizontal in eine HTML-Seite ein?

Wie füge ich mit JavaScript Elemente horizontal in eine HTML-Seite ein?

WBOYnach vorne: 2023-08-25 10:01:17867Durchsuche

Wir können die Methode „createElement“ von JavaScript verwenden, um ein neues Element zu erstellen. Anschließend können wir dieses Element mit der Methode „appendChild“ zum übergeordneten Element auf der HTML-Seite hinzufügen. Um ein Element horizontal zu positionieren, können wir CSS-Stile für das neu erstellte Element verwenden, z. B. „display:inline-block“ oder „float:left/right“.

Angenommen, wir möchten eine grafische Darstellung einer Datenstruktur einer verknüpften Liste beschreiben. Immer wenn der Benutzer auf die Schaltfläche klickt, sollte ein neuer Knoten (in unserem Fall dargestellt durch einen grünen Kreis) horizontal am Anfang der Knotenliste hinzugefügt werden.

Und der Text in diesem grünen Kreis sollte der Index dieses bestimmten Knotens sein.

Methode

Die Methode hier ist sehr einfach und unkompliziert –

Wir erstellen eine Schaltfläche, die für das Einfügen eines neuen Knotens verantwortlich ist.
Jedes Mal, wenn auf die Schaltfläche geklickt wird, erhöht sich die Anzahl der Knoten um 1.
Eine separate Funktion, die für das Rendern des Knotens verantwortlich ist, empfängt dann diese Zählung und rendert den Knoten.
Um die Knoten in umgekehrter Reihenfolge darzustellen, setzen wir die Flex-Direction-Eigenschaft des Container-Div auf row-reverse.

Beispiel

Hier ist ein vollständiges Arbeitsbeispiel dieses Ansatzes -

<!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>

Die chinesische Übersetzung von

Erklärung

lautet:

Erklärung

Wir haben mit JavaScript eine einfache HTML-Datei erstellt, um eine einfache grafische Darstellung einer verknüpften Liste zu erstellen. Es verfügt über eine Schaltfläche, die beim Klicken eine Funktion aufruft, die einen neuen Knoten (Element) in die verknüpfte Liste einfügt und die grafische Darstellung aktualisiert.

Die grafische Darstellung wird mithilfe eines div-Elements mit dem Klassennamen „element“ erstellt und in Form eines Kreises gestaltet. Die Elemente werden in einem Flex-Container mit der „id“ von „holder“ angezeigt, der auf overflow-x:scroll gesetzt ist, damit gescrollt werden kann, wenn sich zu viele Elemente im Ansichtsfenster befinden.

Das obige ist der detaillierte Inhalt vonWie füge ich mit JavaScript Elemente horizontal in eine HTML-Seite ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html Float 数据结构 display overflow flex

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie entferne ich eine Dateierweiterung mit JavaScript aus einer Zeichenfolge?Nächster Artikel：Wie entferne ich eine Dateierweiterung mit JavaScript aus einer Zeichenfolge?

In Verbindung stehende Artikel

Mehr sehen