createElement und appendChild

Lektion 12 von 13 im Kurs JavaScript DOM-Methoden von Coddy.

Die Funktion createElement() erzeugt ein neues HTML-Element mit dem angegebenen Tag-Namen (z. B. div, p, span). Zum Beispiel:

const newElement = document.createElement("p");

Die Funktion appendChild() fügt ein angegebenes Kind-Element als letztes Kind eines anderen Elements ein. Dies ermöglicht es Ihnen, die Hierarchie des Inhalts Ihrer Webseite aufzubauen und zu verändern. Zum Beispiel:

const childElement = document.createElement("p");
childElement.textContent = "This is a new child element.";
parentElement.appendChild(childElement);

Im obigen Beispiel erstellen wir ein neues Element p und hängen es innerhalb des Elements parentElement an.

Aufgabe

Einfach

Dir wird HTML-Code gegeben, der eine ungeordnete Liste mit der ID myList enthält.

Verwende ausschließlich JavaScript, um der ungeordneten Liste ein weiteres Listenelement hinzuzufügen und den Text "Dog" darin einzufügen.

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <ul id="animals">
            <li>Cow</li>
            <li>Ant</li>
            <li>Bear</li>
            <li>Camel</li>
        </ul>
        <script src="script.js"></script>
    </body>
</html>

Alle Lektionen in JavaScript DOM-Methoden

1Einführung

Einführung Document Object Model

2DOM-Methoden I

getElementById Element-Stil ändern getElementsByClassName Durchlaufen und manipulieren getElementsByTagName querySelector

3DOM-Methoden II

querySelectorAll addEventListener innerHTMLcreateElement und appendChildclassList toggle