Heim > Artikel > Web-Frontend > Wie kombiniere ich mehrere Elemente mit JavaScript und hänge das Ergebnis an ein Div an?

Wie kombiniere ich mehrere Elemente mit JavaScript und hänge das Ergebnis an ein Div an?

PHPznach vorne: 2023-09-08 14:37:091317Durchsuche

如何使用 JavaScript 组合多个元素并将结果附加到 div 中？

Manchmal müssen wir JavaScript verwenden, um HTML-Elemente zu bearbeiten. Daher können wir JavaScript verwenden, um HTML-Elemente hinzuzufügen oder zu entfernen. In diesem Tutorial lernen wir, mehrere HTML-Elemente mithilfe von JavaScript in einer Aufnahme zu kombinieren.

Manchmal müssen wir dem Benutzer einige HTML-Elemente anzeigen, wenn er auf eine Schaltfläche oder einen bestimmten Ereignisauslöser klickt. Wir können also die folgende Methode verwenden, um mehrere Elemente zu kombinieren und das Ergebnis mithilfe von JavaScript an ein div-Element anzuhängen.

Verwenden Sie das innerHTML-Attribut

innerHTML ermöglicht uns, wie der Name schon sagt, das Festlegen des HTML-Codes eines bestimmten Elements mithilfe von JavaScript. Durch die Verwendung des Zuweisungsoperators mit dem Attribut innerHTML wird der HTML-Code eines bestimmten Elements ersetzt.

Wenn wir den Operator += mit dem Attribut innerHTML verwenden, können wir mehrere Elemente an ein bestimmtes HTML-Element anhängen.

Grammatik

Sie können mehrere Elemente kombinieren und sie mithilfe des innerHTML-Attributs gemäß der folgenden Syntax an ein div-Element anhängen.

test_div.innerHTML += html;

In der obigen Syntax ist test_div ein HTML-Element, auf das über JavaScript zugegriffen wird.

Beispiel

Im folgenden Beispiel führen wir fünf Iterationen der for-Schleife durch. Wir verwenden das innerHTML-Attribut, um bei jeder Schleifeniteration etwas HTML an das div-Element anzuhängen.

<html>
<head>
   <style>
      button {
         font-size: 1.3rem;
         background-color: aqua;
         border-radius: 10px;
         color: blue;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h3>Using the <i> innerHTML property </i> to append multiple HTML elements to the particular HTML element</h3>
   <div id = "test_div"> This is the HTML div element.</div>
   <button onclick = "appendEle()"> Append elements</button>
   <script>
      function appendEle() {
         let test_div = document.getElementById("test_div");
         for (let i = 0; i < 5; i++) {
            test_div.innerHTML += "<p> digit is " + i + " </p>";
         }
      }
   </script>
</body>
</html>

Verwenden Sie die append()-Methode von JQuery

Mit der append()-Methode von JQuery können wir HTML an ein bestimmtes Element anhängen. Wir können die Methode append() mehrmals verwenden, um mehrere Elemente an ein bestimmtes HTML-Element anzuhängen.

Grammatik

Benutzer können der folgenden Syntax folgen, um mithilfe der append()-Methode von jQuery mehrere HTML-Elemente an ein bestimmtes HTML-Element anzuhängen.

$('#content').append(html)

In der obigen Syntax ist HTML eine HTML-Zeile, die mehrere oder einzelne Elemente enthält und an das Ende des HTML-Elements angehängt wird.

Beispiel

Wenn der Benutzer im folgenden Beispiel auf die Schaltfläche klickt, wird die Funktion appendHTML() aufgerufen. In der Funktion appendHTML() hängen wir mithilfe einer Schleife mehrere HTML-Elemente an ein bestimmtes Element an. Benutzer können sehen, dass wir die JQuery-Methode append() verwenden, um bei jeder Schleifeniteration neue HTML-Elemente anzuhängen.

<html>
<head>
   <style>
      div {
         font-size: 1.5rem;
         background-color: yellow;
         color: black;
         width: 250px;
      }
   </style>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
   <h3>Using the <i>JQuery append()</i> method to append multiple HTML elements to the particular HTML element </h3>
   <div id = "content"> testing content. </div><br>
   <button onclick = "appendHTML()"> Append elements </button>
   <script>
      function appendHTML() {
         for (let i = 0; i < 10; i++) {
            $('#content').append('<div> This div is appended! </div>')
          }
      }
   </script>
</body>
</html>

In der obigen Ausgabe kann der Benutzer beobachten, dass beim Klicken auf die Schaltfläche das HTML-Element an das div-Element mit der ID „content“ angehängt wird.

Verwenden Sie die Methode after() von JavaScript

JavaScript enthält die Methode after() zum Hinzufügen von HTML-Elementen nach einem bestimmten Element. Wir können durch Kommas getrennte HTML-Zeilen übergeben oder After-Elemente in JavaScript als Argumente für die Methode after() erstellen.

Grammatik

Benutzer können der folgenden Syntax folgen, um mithilfe der JavaScript-Methode after() mehrere Elemente an ein HTML-Element anzuhängen, anstatt sie zu einem einzigen Element zu kombinieren.

div_Element.after(elements);

Parameter

Elemente – Hierbei handelt es sich um mehrere durch Kommas getrennte HTML-Elemente, die nach einem bestimmten HTML-Element hinzugefügt werden.

Beispiel

Im folgenden Beispiel wird die Funktion concatElements() ausgeführt, wenn der Benutzer auf die Schaltfläche klickt. In der Funktion concatElements() erstellen wir ein HTML-Element mit der Methode createElement() und fügen ihm mithilfe des innerHTML-Attributs HTML hinzu.

Danach übergeben wir element1 und element2 als Parameter der after()-Methode, um sie nach dem div-Element anzuhängen.

<html>
<head>
   <style>
      div {
         font-size: 1.5rem;
         background-color: yellow;
         color: black;
         width: 250px;
      }
      p {
         font-size: 1rem;
         background-color: blue;
         color: white;
         width: 250px;
         padding: 5px;;
      }
   </style>
</head>
<body>
   <h3>Using the <i>after()</i> method to append multiple HTML elements to the particular HTML element</h3>
   <div id = "content"> testing content. </div>
   <button onclick = "concatElements()"> Combine elements </button>
   <script>
      function concatElements() {
         let element1 = document.createElement('p');
         element1.innerHTML = "This is a first element!";
         let element2 = document.createElement('p');
         element2.innerHTML = "This is a second element!";
         let div_Element = document.getElementById('content');
         div_Element.after(element1, element2);
      }
   </script>
</body>
</html>

Der Benutzer hat drei Möglichkeiten kennengelernt, mehrere HTML-Elemente in JavaScript zu kombinieren und das resultierende Element an ein beliebiges HTML-Element anzuhängen. Bei der ersten Methode kann der Benutzer mit dem Operator += mehrere Elemente in einer einzigen Variablen speichern und dann den Wert des resultierenden Elements dem innerHTML-Attribut zuweisen.

Das obige ist der detaillierte Inhalt vonWie kombiniere ich mehrere Elemente mit JavaScript und hänge das Ergebnis an ein Div an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html 运算符赋值运算符 for 循环 append 事件 innerHTML

Stellungnahme：

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

Vorheriger Artikel：Wie kann ein bestimmter Frame über einen Hyperlink in JavaScript gezielt angesprochen werden?Nächster Artikel：Wie kann ein bestimmter Frame über einen Hyperlink in JavaScript gezielt angesprochen werden?

In Verbindung stehende Artikel

Mehr sehen