3.1 Creación de elementos
Trabajar con el DOM (Document Object Model) incluye no solo navegar por los elementos existentes, sino también crear nuevos elementos, insertarlos en el documento y eliminarlos. Ahora vamos a ver diferentes métodos y enfoques para crear y eliminar elementos en el DOM.
Método document.createElement()
El método principal para crear un nuevo elemento en el DOM es document.createElement(). Este método recibe el nombre de la etiqueta del elemento que deseas crear y devuelve un nuevo elemento vacío.
Ejemplo:
const newDiv = document.createElement('div');
Agregar contenido a un elemento
Después de crear un nuevo elemento, puedes llenarlo con contenido. Esto puede ser texto, otros elementos o una combinación de ambos.
Ejemplo:
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
También puedes usar la propiedad innerHTML para añadir contenido HTML.
Ejemplo:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 Inserción de elementos en el DOM
El elemento creado debe ser añadido al documento. Hay varios métodos para insertar elementos en el DOM:
1. Método appendChild()
El método appendChild() agrega un elemento al final de la lista de elementos hijos de un elemento padre especificado.
Ejemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Método insertBefore()
El método insertBefore() añade un elemento antes del elemento hijo especificado de un elemento padre.
Ejemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a old div element</div>
<p>This is a paragraph</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Método append()
El método append() añade uno o más nodos o cadenas al final de la lista de elementos hijos del elemento padre especificado.
Ejemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. Método prepend()
El método prepend() añade uno o más nodos o cadenas al comienzo de la lista de elementos hijos del elemento padre especificado.
Ejemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Clonación de elementos
El método cloneNode() permite clonar un elemento. La clonación puede ser profunda (con copia de todos los elementos hijos) o superficial (sólo el propio elemento).
Ejemplo de clonación profunda:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Ejemplo de clonación superficial:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
El elemento <div> fue clonado, se puede ver gracias a los estilos, pero sus elementos hijos (el nodo de texto "This is a div element" y <ul>) no fueron clonados.
3.4 Eliminación de elementos
1. Método removeChild()
El método removeChild() elimina un elemento hijo de un elemento padre.
Ejemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Método remove()
El método remove() elimina un elemento del DOM directamente.
Ejemplo:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a div element</div>
<p>This is a paragraph</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Limpieza del contenido de un elemento
Se puede usar el método innerHTML para eliminar todo el contenido de un elemento, asignándole una cadena vacía.
Ejemplo:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Eliminación de todos los elementos hijos
Para eliminar todos los elementos hijos, se puede usar un ciclo o el método innerHTML.
Ejemplo con un ciclo:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
Ejemplo con innerHTML:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION