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.
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.
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.
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>
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.
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.
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.
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.
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);
Elemente – Hierbei handelt es sich um mehrere durch Kommas getrennte HTML-Elemente, die nach einem bestimmten HTML-Element hinzugefügt werden.
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!
So implementieren Sie die Docker-Container-Technologie in Java
Buchstaben-Abstand
Verwendung der fgets-Funktion
So verwenden Sie die einzelnen Funktionen in js
Einführung in die Verwendung der Stickline-Funktion
Warum kann der Himalaya keine Verbindung zum Internet herstellen?
Der Programmeingabepunkt konnte in der Dynamic Link Library nicht gefunden werden
Linux-Ansichtsprozess
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
