createElement e appendChild

Lição 12 de 13 do curso Métodos DOM do JavaScript da Coddy.

A função createElement() cria um novo elemento HTML com o nome da tag especificado (ex: div, p, span). Por exemplo:

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

A função appendChild() insere um elemento filho especificado como o último filho de outro elemento. Isso permite que você construa e modifique a hierarquia do conteúdo da sua página web. Por exemplo:

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

No exemplo acima, criamos um novo elemento p e o anexamos dentro do elemento parentElement.

Desafio

Fácil

Você recebeu um código HTML que contém uma lista não ordenada com o ID myList.

Usando apenas JavaScript, adicione outro item de lista à lista não ordenada e adicione o texto "Dog" a ele.

Experimente você mesmo

<!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 as lições de Métodos DOM do JavaScript

1Introdução

Introdução Document Object Model

2Métodos do DOM I

getElementById Modificar Estilo do Elemento getElementsByClassName Percorrer e Manipular getElementsByTagName querySelector

3Métodos do DOM II

querySelectorAll addEventListener innerHTMLcreateElement e appendChildclassList toggle