En esta práctica de JavaScript he puesto en práctica la creación y manipulación de elementos (nodos) del DOM.
El usuario pulsará en distintos párrafos que insertarán, reemplazarán, suprimirán, cambiarán y copiarán distintos elementos del DOM respectivamente.
Para poder comprender el código de esta práctica es muy importante conocer el uso de los métodos createElement(), createTextNode(), appendChild(), insertBefore(), replaceChild(), removeChild() y cloneNode(), así como de la propiedad parent.Node. Como ayuda puedes echarle un vistazo a los siguientes enlaces:
👉Enlace 1 👉Enlace 2 👉Enlace 3 👉Enlace 4 👉Enlace 5 👉Enlace 6 👉Enlace 7 👉Enlace 8
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="caja">
<h4 id="primero">Primer texto fijo.</h4>
<h4 id="segundo">Segundo texto fijo.</h4>
<h4 id="tercero">Tercer texto fijo.</h4>
</div>
<p id="restaura">Pulse aquí para restaurar la caja.</p>
<p id="debajo">Inserte un nuevo elemento debajo.</p>
<p id="delante">Inserte un nuevo elemento delante del segundo.</p>
<p id="reemplaza">Reeemplace el primer elemento de la caja por otro nuevo.</p>
<p id="suprime">Suprima el tercer párrafo.</p>
<p id="cambia">Ponga el segundo texto en último lugar.</p>
<p id="copia">Copia del segundo elemento. Se inserta al final.</p>
</body>
</html>Código CSS
#caja {
width: 400px;
height: 250px;
border: 1px solid black;
float: right;
overflow: auto;
padding: 10px;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("restaura").addEventListener("click", restaurar, false);
document.getElementById("debajo").addEventListener("click", debajo, false);
document.getElementById("delante").addEventListener("click", delante, false);
document.getElementById("reemplaza").addEventListener("click", reemplazar, false);
document.getElementById("suprime").addEventListener("click", suprimir, false);
document.getElementById("cambia").addEventListener("click", cambiar, false);
document.getElementById("copia").addEventListener("click", copiar, false);
let caja = document.getElementById("caja");
}
let nuevoElemento = document.createElement("p");
let nuevoTexto = document.createTextNode("Nuevo elemento en la página.");
let nuevo = nuevoElemento.appendChild(nuevoTexto);
function restaurar() {
caja.innerHTML = "<h4 id='primero'>Primer texto fijo.</h4><h4 id='segundo'>Segundo texto fijo.</h4><h4 id='tercero'>Tercer texto fijo.</h4>";
}
function debajo() {
caja.appendChild(nuevo);
}
function delante() {
let segundo = document.getElementById("segundo");
let padre = segundo.parentNode;
padre.insertBefore(nuevo, segundo);
}
function reemplazar() {
let primero = document.getElementById("primero");
let padre = primero.parentNode;
padre.replaceChild(nuevo, primero);
}
function suprimir() {
let tercero = document.getElementById("tercero");
tercero.parentNode.removeChild(tercero);
}
function cambiar() {
let segundo = document.getElementById("segundo");
segundo.parentNode.removeChild(segundo);
caja.appendChild(segundo);
}
function copiar() {
let segundo = document.getElementById("segundo");
let copia = segundo.cloneNode(true);
caja.appendChild(copia);
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.