Element mit Klasse in JavaScript erstellen
Dieser Artikel generiert ein HTML-Element mit einer JavaScript-Funktion; Wir rufen die Funktion auf dem Klickereignis der Schaltfläche auf und erstellen ein Element mit der Klasse.
Element in JavaScript erstellen
document.createElement() ist eine Standardmethode, die den Parameter des HTML-Tag-Namens als Zeichenfolge akzeptiert und einen HTML-Elementtyp-Knoten erstellt.
Wir können jedes beliebige HTML-Element erstellen und es mit diesem an den DOM-Baum anhängen. Wir können ID, Inhalt und CSS für das Styling zuweisen und dieses Element an den Hauptteil der HTML-Seite anhängen.
Grundlegende Syntax:
let myElement = document.createElement(anyTag);
Element mit Klasse in JavaScript erstellen
Wir können ein HTML-Element mit Klasse erstellen, indem wir die Methode classList.add() verwenden. Mit dieser Methode können wir einem Element auch mehr als eine Klasse hinzufügen.
Die Methode add() übergibt die Klasse, wenn sie bereits auf dem HTML-Element vorhanden ist. Wir können die Methode appendChild() verwenden, um einen Elementknoten an den Hauptteil von HTML anzuhängen.
Syntax mit Klasse:
element.classList.add('bg-red', 'text-lg')
Beispiel:
<!DOCTYPE html>
<html>
<style>
.mystyle {
background-color: yellow;
padding: 10px;
}
</style>
<body>
<h1>Delftstack learning</h1>
<h2>Create element with class using JavaScript</h2>
<p>Click the button to create an element:</p>
<button onclick="createFunction()">Create</button>
<script>
function createFunction() {
let myDiv = document.createElement('div'); // element creation
myDiv.classList.add('mystyle'); // adding class
let content = document.createTextNode('This is a text content of an element!'); // text content
myDiv.appendChild(content); // append text content to element
document.body.appendChild(myDiv) // append element to body
}
</script>
</body>
</html>
In der obigen HTML-Quelle haben wir ein button-Element erstellt und beim Click-Event dieser Schaltfläche haben wir createFunction() aufgerufen. In dieser Funktion erstellen wir ein div-Element mit der document.createElement('div')-Methode und speichern es in der Variablen myDiv.
Dann haben wir diesem Element die Klasse mystyle hinzugefügt, indem wir die Methode myDiv.classList.add('mystyle') verwendet und Textinhalt hinzugefügt haben, um ihn mit document.createTextNode() anzuzeigen und an myDiv anzuhängen.
Schließlich fügen wir das Element mit document.body.appendChild(myDiv) an den Hauptteil der HTML-Quelle an. Sie können die obige Quelle mit der Erweiterung html speichern und im Browser öffnen und das Beispiel testen.