Wie man HTML mit Javascript ausgibt: Beispiele und Erklärung

JavaScript ist eine der beliebtesten Programmiersprachen, die zum Erstellen interaktiver Websites verwendet werden kann. Eine der nützlichen Funktionen von JavaScript ist die Möglichkeit, HTML-Elemente auf einer Webseite dynamisch zu erstellen und zu ändern.

document.getElementById("myElement").innerHTML = "Neuer Text";

Die Methode ist jedoch innerHTML verpflichtet den Browser, den gesamten HTML-Code innerhalb eines Elements neu zu zeichnen, was bei großen und komplexen Seiten möglicherweise ineffizient ist. Der effizientere Weg ist die Verwendung der Methode createElement erstellen neuer HTML-Elemente und -Methoden appendChild oder insertBefore um diese Elemente dem DOM hinzuzufügen.

JavaScript bietet die Möglichkeit, HTML-Code auf einer Webseite dynamisch zu erstellen und zu ändern. Dies ist sehr nützlich, wenn Sie den Inhalt einer Seite hinzufügen oder ändern möchten, ohne sie neu zu laden.

Beispiel für die Verwendung der Methode innerHTML:

// Erstellen Sie ein Div-Element
var divElement = document.createElement('div');
// Legen Sie den Inhalt des div-Elements als HTML-Code fest
divElement.innerHTML = 'h1Hallo, Welt!/h1pDies ist ein dynamisch erstellter HTML-Code/p';
// Fügen Sie der Seite ein div-Element hinzu
document.body.appendChild(divElement);

Das obige ist ein einfaches Beispiel, das ein div-Element erstellt und dessen Inhalt mithilfe einer Methode als HTML-Code festlegt innerHTML und fügt der Seite mit einer Methode ein div-Element hinzu appendChild.

Außer der Methode innerHTML. Sie können auch Methoden verwenden createElement, appendChild und andere, um HTML-Elemente mit JavaScript zu erstellen und zu einer Seite hinzuzufügen. Dadurch können Sie dynamische und interaktive Webseiten erstellen.

Flexibilität und Dynamik

Interaktivität

Trennung von Logik und Ansicht

Verbesserte Leistung

Erweiterte Formatierungsoptionen

Verbesserte Kontrolle und Sicherheit

Wie man HTML mit JavaScript ausgibt

var table = "
Имя
Возраст
Анна
25
Иван
30
";document.getElementById("table-container").innerHTML = table;

Eine andere Möglichkeit besteht darin, die createElement() -Methode zu verwenden. Mit dieser Methode können Sie ein neues HTML-Element erstellen und es dann der Seite hinzufügen. Der folgende Code erstellt beispielsweise ein p-Element und fügt es der Seite hinzu:

var paragraph = document.createElement("p");paragraph.textContent = "Привет, мир!";document.getElementById("paragraph-container").appendChild(paragraph);

Empfehlungen für Anfänger

1. Skript verbinden

2. getElementById

Verwenden Sie die Methode, um ein Element auf Ihrer Webseite auszuwählen getElementById(). Diese Methode ermöglicht den Zugriff auf ein Element anhand seiner ID. Zum Beispiel:

let element = document.getElementById("myElement");

3. Erstellen von Elementen

Mit JavaScript können Sie auch neue HTML-Elemente erstellen. Verwenden Sie dazu die Methode createElement(). Um beispielsweise einen neuen Absatz zu erstellen, können Sie den folgenden Code schreiben:

let newParagraph = document.createElement("p");

4. Hinzufügen von Elementen

Nachdem Sie ein Element erstellt haben, können Sie es mithilfe der Methode zur Seite hinzufügen appendChild(). Um beispielsweise einen neuen Absatz innerhalb eines Elements mit der ID "myElement" hinzuzufügen, können Sie den folgenden Code verwenden:

let parentElement = document.getElementById("myElement");parentElement.appendChild(newParagraph);

5. Ändern des Inhalts von Elementen

Mit JavaScript können Sie auch den Inhalt von Elementen ändern. Um beispielsweise den Text eines Absatzes zu ändern, können Sie die Eigenschaft verwenden textContent:

element.textContent = "Новый текст абзаца";

6. Elemente löschen

Wenn Sie ein Element von einer Webseite entfernen möchten, verwenden Sie die Methode remove(). Wenn Sie beispielsweise ein Element mit der ID "myElement" löschen möchten, können Sie den folgenden Code schreiben:

let elementToRemove = document.getElementById("myElement");elementToRemove.remove();