createElement e appendChild

Lezione 12 di 13 del corso Metodi DOM di JavaScript di Coddy.

La funzione createElement() crea un nuovo elemento HTML con il nome del tag specificato (ad es., div, p, span). Per esempio:

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

La funzione appendChild() inserisce un elemento figlio specificato come ultimo figlio di un altro elemento. Questo ti permette di creare e modificare la gerarchia dei contenuti della tua pagina web. Per esempio:

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

NELL'esempio sopra, creiamo un nuovo elemento p e lo aggiungiamo all'interno dell'elemento parentElement.

Sfida

Facile

Ti viene fornito del codice HTML che contiene un elenco non ordinato con ID myList.

Usando solo JavaScript, aggiungi un altro elemento all’elenco non ordinato e aggiungi il testo "Dog".

Provalo tu

<!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>

Tutte le lezioni di Metodi DOM di JavaScript

1Introduzione

Introduzione Document Object Model

2Metodi DOM I

getElementById Modificare lo stile di un elemento getElementsByClassName Iterare e manipolare getElementsByTagName querySelector

3Metodi DOM II

querySelectorAll addEventListener innerHTMLcreateElement e appendChildAttivazione/disattivazione con classList

Esercitati da solo: Playground Web