3.1 Erstellen von Elementen
Die Arbeit mit dem DOM (Document Object Model) umfasst nicht nur die Navigation durch bestehende Elemente, sondern auch das Erstellen neuer Elemente, deren Einfügen in das Dokument und das Löschen. Jetzt schauen wir uns verschiedene Methoden und Ansätze zum Erstellen und Entfernen von Elementen im DOM an.
Methode document.createElement()
Die Hauptmethode zum Erstellen eines neuen Elements im DOM ist document.createElement(). Diese Methode nimmt den Tag-Namen des zu erstellenden Elements als Parameter und gibt ein neues leeres Element zurück.
Beispiel:
const newDiv = document.createElement('div');
Hinzufügen von Inhalten zu einem Element
Nach der Erstellung eines neuen Elements kann man es mit Inhalten füllen. Das kann Text sein, andere Elemente oder eine Kombination aus beidem.
Beispiel:
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
Man kann auch die Eigenschaft innerHTML verwenden, um HTML-Inhalte hinzuzufügen.
Beispiel:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 Einfügen von Elementen in das DOM
Das erstellte Element muss in das Dokument eingefügt werden. Es gibt mehrere Methoden zum Einfügen von Elementen in das DOM:
1. Methode appendChild()
Die Methode appendChild() fügt ein Element am Ende der Liste der Kindelemente eines angegebenen Elternelements hinzu.
Beispiel:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Methode insertBefore()
Die Methode insertBefore() fügt ein Element vor einem angegebenen Kindelement des Elternelements hinzu.
Beispiel:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a old div element</div>
<p>This is a paragraph</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Methode append()
Die Methode append() fügt einen oder mehrere Knoten oder Zeichenfolgen am Ende der Liste der Kindelemente eines angegebenen Elternelements hinzu.
Beispiel:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. Methode prepend()
Die Methode prepend() fügt einen oder mehrere Knoten oder Zeichenfolgen am Anfang der Liste der Kindelemente eines angegebenen Elternelements hinzu.
Beispiel:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Klonen von Elementen
Die Methode cloneNode() ermöglicht das Klonen eines Elements. Das Klonen kann tief (mit Kopieren aller Kindelemente) oder flach (nur das Element selbst) sein.
Beispiel für tiefes Klonen:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Beispiel für flaches Klonen:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
Das Element <div> selbst wurde geklont, was man an den Stilen erkennen kann, aber seine Kindelemente (der Textknoten "This is a div element" und <ul>) wurden nicht geklont.
3.4 Löschen von Elementen
1. Methode removeChild()
Die Methode removeChild() entfernt ein Kindelement aus einem Elternelement.
Beispiel:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Methode remove()
Die Methode remove() entfernt ein Element direkt aus dem DOM.
Beispiel:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a div element</div>
<p>This is a paragraph</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Bereinigung des Inhalts eines Elements
Die Methode innerHTML kann verwendet werden, um den gesamten Inhalt eines Elements zu löschen, indem man ihm einen leeren String zuweist.
Beispiel:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Löschen aller Kindelemente
Um alle Kindelemente zu löschen, kann man eine Schleife oder die Methode innerHTML verwenden.
Beispiel mit Schleife:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
Beispiel mit innerHTML:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION