createElement y appendChild

Lección 12 de 13 del curso Métodos del DOM de JavaScript de Coddy.

La función createElement() crea un nuevo elemento HTML con el nombre de etiqueta especificado (por ejemplo, div, p, span). Por ejemplo:

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

La función appendChild() inserta un elemento hijo especificado como el último hijo de otro elemento. Esto le permite construir y modificar la jerarquía del contenido de su página web. Por ejemplo:

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

En el ejemplo anterior, creamos un nuevo elemento p y lo añadimos dentro del elemento parentElement.

Desafío

Fácil

Se te proporciona código HTML que contiene una lista desordenada con un ID myList.

Usando solo JavaScript, añade otro elemento de lista a la lista desordenada y agrégale el texto "Dog".

Pruébalo tú mismo

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

Todas las lecciones de Métodos del DOM de JavaScript

1Introducción

Introducción Document Object Model

2Métodos del DOM I

getElementById Modificar el estilo del elemento getElementsByClassName Recorrer y manipular getElementsByTagName querySelector

3Métodos del DOM II

querySelectorAll addEventListener innerHTMLcreateElement y appendChildclassList toggle