El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Creación y Eliminación de Elementos del DOM

Siguiente ►
►

En esta sección, aprenderemos cómo crear y eliminar elementos en el DOM (Document Object Model) utilizando JavaScript. Manipular el DOM es una habilidad esencial para cualquier desarrollador web, ya que permite dinamizar y actualizar el contenido de una página web sin necesidad de recargarla.

Conceptos Clave

  1. DOM (Document Object Model): Es una representación estructurada del documento HTML. Permite a los lenguajes de programación acceder y manipular el contenido, estructura y estilo de una página web.
  2. Elementos del DOM: Son nodos que representan las etiquetas HTML. Cada etiqueta HTML en el documento se convierte en un nodo en el DOM.
  3. Métodos de Creación y Eliminación: JavaScript proporciona varios métodos para crear y eliminar elementos del DOM.

Creación de Elementos del DOM

Método document.createElement()

Este método se utiliza para crear un nuevo elemento HTML.

// Crear un nuevo elemento <div>
let newDiv = document.createElement('div');

Método element.appendChild()

Este método se utiliza para añadir un nuevo nodo como hijo de un nodo existente.

// Crear un nuevo elemento <div>
let newDiv = document.createElement('div');

// Crear un nodo de texto
let newContent = document.createTextNode('Hola, Mundo!');

// Añadir el nodo de texto al <div>
newDiv.appendChild(newContent);

// Añadir el nuevo <div> al body del documento
document.body.appendChild(newDiv);

Ejemplo Completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Creación de Elementos del DOM</title>
</head>
<body>
    <script>
        // Crear un nuevo elemento <div>
        let newDiv = document.createElement('div');

        // Crear un nodo de texto
        let newContent = document.createTextNode('Hola, Mundo!');

        // Añadir el nodo de texto al <div>
        newDiv.appendChild(newContent);

        // Añadir el nuevo <div> al body del documento
        document.body.appendChild(newDiv);
    </script>
</body>
</html>

Eliminación de Elementos del DOM

Método element.removeChild()

Este método se utiliza para eliminar un nodo hijo de un nodo existente.

// Seleccionar el elemento padre
let parentElement = document.getElementById('parent');

// Seleccionar el elemento hijo
let childElement = document.getElementById('child');

// Eliminar el elemento hijo
parentElement.removeChild(childElement);

Método element.remove()

Este método se utiliza para eliminar un nodo directamente.

// Seleccionar el elemento a eliminar
let elementToRemove = document.getElementById('element');

// Eliminar el elemento
elementToRemove.remove();

Ejemplo Completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Eliminación de Elementos del DOM</title>
</head>
<body>
    <div id="parent">
        <div id="child">Este es un elemento hijo</div>
    </div>
    <script>
        // Seleccionar el elemento padre
        let parentElement = document.getElementById('parent');

        // Seleccionar el elemento hijo
        let childElement = document.getElementById('child');

        // Eliminar el elemento hijo
        parentElement.removeChild(childElement);
    </script>
</body>
</html>

Ejercicios Prácticos

Ejercicio 1: Crear y Añadir un Elemento

Instrucciones: Crea un nuevo elemento <p> con el texto "Este es un nuevo párrafo" y añádelo al final del <body> del documento.

Solución:

// Crear un nuevo elemento <p>
let newParagraph = document.createElement('p');

// Crear un nodo de texto
let paragraphContent = document.createTextNode('Este es un nuevo párrafo');

// Añadir el nodo de texto al <p>
newParagraph.appendChild(paragraphContent);

// Añadir el nuevo <p> al body del documento
document.body.appendChild(newParagraph);

Ejercicio 2: Eliminar un Elemento

Instrucciones: Elimina el elemento con el id remove-me del documento.

Solución:

// Seleccionar el elemento a eliminar
let elementToRemove = document.getElementById('remove-me');

// Eliminar el elemento
elementToRemove.remove();

Resumen

En esta sección, hemos aprendido cómo crear y eliminar elementos del DOM utilizando JavaScript. Hemos cubierto los métodos document.createElement(), element.appendChild(), element.removeChild(), y element.remove(). Estos métodos son fundamentales para manipular el DOM y crear aplicaciones web dinámicas. Asegúrate de practicar estos conceptos con los ejercicios proporcionados para reforzar tu comprensión.

En la siguiente sección, exploraremos cómo manejar y validar formularios en el DOM. ¡Sigue adelante!

◄ Anterior
◄
Siguiente ►
►

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados